A easy file add server written in Swift
For this easy file add tutorial we’ll solely use the Vapor Swift package deal as a dependency. 📦
import PackageDescription
let package deal = Package deal(
title: "myProject",
platforms: [
.macOS(.v10_15)
],
dependencies: [
.package(url: "https://github.com/vapor/vapor", from: "4.35.0"),
],
targets: [
.target(
name: "App",
dependencies: [
.product(name: "Vapor", package: "vapor"),
],
swiftSettings: [
.unsafeFlags(["-cross-module-optimization"], .when(configuration: .launch))
]
),
.goal(title: "Run", dependencies: [.target(name: "App")]),
.testTarget(title: "AppTests", dependencies: [
.target(name: "App"),
.product(name: "XCTVapor", package: "vapor"),
])
]
)You’ll be able to setup the venture with the required information utilizing the Vapor toolbox, alternatively you may create all the pieces by hand utilizing the Swift Package deal Supervisor, lengthy story brief, we simply want a starter Vapor venture with out extra dependencies. Now when you open the Package deal.swift file utilizing Xcode, we will setup our routes by altering the configure.swift file.
import Vapor
public func configure(_ app: Software) throws {
app.middleware.use(FileMiddleware(publicDirectory: app.listing.publicDirectory))
app.routes.defaultMaxBodySize = "10mb"
app.submit("add") { req -> EventLoopFuture<String> in
let key = strive req.question.get(String.self, at: "key")
let path = req.utility.listing.publicDirectory + key
return req.physique.gather()
.unwrap(or: Abort(.noContent))
.flatMap { req.fileio.writeFile($0, at: path) }
.map { key }
}
}First we use the FileMiddleware, it will enable us to server information utilizing the Public listing inside our venture folder. If you do not have a listing named Public, please create one, for the reason that file add server will want that. Do not forget to present correct file system permissions if needed, in any other case we can’t be capable of write our knowledge contained in the listing. 📁
The following factor that we set is the default most physique measurement. This property can restrict the quantity of information that our server can settle for, you do not actually wish to use this technique for big information as a result of uploaded information will likely be saved within the system reminiscence earlier than we write them to the disk.
If you wish to add giant information to the server it’s best to think about streaming the file as a substitute of gathering the file knowledge from the HTTP physique. The streaming setup would require a bit extra work, nevertheless it’s not that sophisticated, if you’re excited about that answer, it’s best to learn the Information API and the physique streaming part utilizing official Vapor docs website.
This time we simply desire a lifeless easy file add API endpoint, that collects the incoming knowledge utilizing the HTTP physique right into a byte buffer object, then we merely write this buffer utilizing the fileio to the disk, utilizing the given key from the URL question parameters. If all the pieces was achieved with out errors, we will return the important thing for the uploaded file.
File add duties utilizing the URLSession API The Basis frameworks offers us a pleasant API layer for frequent networking duties. We are able to use the URLSession uploadTask technique to ship a brand new URLRequest with an information object to a given server, however IMHO this API is kind of unusual, as a result of the URLRequest object already has a httpBody property, however you need to explicitly move a “from: Information?” argument whenever you assemble the duty. However why? 🤔
import Basis
extension URLSession {
func uploadTask(with request: URLRequest, completionHandler: @escaping (Information?, URLResponse?, Error?) -> Void) -> URLSessionUploadTask {
uploadTask(with: request, from: request.httpBody, completionHandler: completionHandler)
}
}Anyway, I made slightly extension technique, so after I create the URLRequest I can set the httpBody property of it and safely move it earlier than the completion block and use the contents because the from parameter. Very unusual API design alternative from Apple… 🤐
We are able to put this little snippet right into a easy executable Swift package deal (or in fact we will create a complete utility) to check our add server. In our case I am going to place all the pieces right into a important.swift file.
import Basis
import Dispatch
extension URLSession {
func uploadTask(with request: URLRequest, completionHandler: @escaping (Information?, URLResponse?, Error?) -> Void) -> URLSessionUploadTask {
uploadTask(with: request, from: request.httpBody, completionHandler: completionHandler)
}
}
let fileData = strive Information(contentsOf: URL(fileURLWithPath: "/Customers/[user]]/[file].png"))
var request = URLRequest(url: URL(string: "http://localhost:8080/add?key=(UUID().uuidString).png")!)
request.httpMethod = "POST"
request.httpBody = fileData
let process = URLSession.shared.uploadTask(with: request) { knowledge, response, error in
guard error == nil else {
fatalError(error!.localizedDescription)
}
guard let response = response as? HTTPURLResponse else {
fatalError("Invalid response")
}
guard response.statusCode == 200 else {
fatalError("HTTP standing error: (response.statusCode)")
}
guard let knowledge = knowledge, let outcome = String(knowledge: knowledge, encoding: .utf8) else {
fatalError("Invalid or lacking HTTP knowledge")
}
print(outcome)
exit(0)
}
process.resume()
dispatchMain()The above instance makes use of the Dispatch framework to attend till the asynchronous file add finishes. You need to change the placement (and the extension) of the file if needed earlier than you run this script. Since we outlined the add route as a POST endpoint, we’ve got to set the httpMethod property to match this, additionally we retailer the file knowledge within the httpBody variable earlier than we create our process. The add URL ought to include a key, that the server can use as a reputation for the file. You’ll be able to add extra properties in fact or use header values to verify if the person has correct authorization to carry out the add operation. Then we name the add process extension technique on the shared URLSession property. The good factor about uploadTask is which you could run them on the background if wanted, that is fairly useful if it involves iOS improvement. 📱
Contained in the completion handler we’ve got to verify for a couple of issues. To start with if there was an error, the add should have failed, so we name the fatalError technique to interrupt execution. If the response was not a legitimate HTTP response, or the standing code was not okay (200) we additionally cease. Lastly we wish to retrieve the important thing from the response physique so we verify the information object and convert it to a UTF8 string if potential. Now we will use the important thing mixed with the area of the server to entry the uploaded file, this time I simply printed out the outcome, however hey, that is only a demo, in an actual world utility you would possibly wish to return a JSON response with extra knowledge. 😅
Vanilla JavaScript file uploader
Another factor… you should use Leaf and a few Vanilla JavaScript to add information utilizing the newly created add endpoint. Really it is very easy to implement a brand new endpoint and render a Leaf template that does the magic. You may want some primary HTML and some strains of JS code to submit the contents of the file as an array buffer. This can be a primary instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="viewport" content material="width=device-width, initial-scale=1">
<title>File add</title>
</head>
<physique>
<h1>File add</h1>
<enter sort="file" id="file" title="file" settle for="picture/*" /><br><br>
<img id="preview" src="https://theswiftdev.com/pictures/logos/brand.png" width="256px">
<script>
doc.getElementById('file').addEventListener("change", uploadImage);
perform uploadImage() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/add?key=check.png", true);
xhr.onreadystatechange = perform() {
if(xhr.readyState == 4 && xhr.standing == 200) {
doc.getElementById('preview').src = "/" + this.responseText;
}
};
var file = doc.getElementById('file').information[0];
if (file) {
var reader = new FileReader();
reader.onload = perform() {
xhr.ship(reader.outcome);
}
reader.readAsArrayBuffer(file);
}
}
</script>
</physique>
</html>
As you may see it is a typical XHR request mixed with the FileReader JavaScript API. We use the FileReader to transform our enter to a binary knowledge, this fashion our server can write it to the file system within the anticipated format. Most often persons are utilizing a multipart-encoded type to entry information on the server, however when you need to work with an API you may also switch uncooked file knowledge. If you wish to be taught extra about XHR requests and AJAX calls, it’s best to learn my earlier article.
I even have a submit about totally different file add strategies utilizing customary HTML kinds and a Vapor 4 server as a backend. I hope you may discover the fitting answer that you simply want to your utility. 👍