How to Upload Pictures in an App Swift

In previous chapters, you learned how to ship data to your Vapor application in POST requests. Yous used JSON bodies and forms to transmit the information, merely the data was always simple text. In this chapter, you'll learn how to send files in requests and handle that in your Vapor application. You'll use this knowledge to allow users to upload contour pictures in the spider web application.

Note: This affiliate teaches yous how to upload files to the server where your Vapor application runs. For a real application, you should consider forwarding the file to a storage service, such as AWS S3. Many hosting providers, such as Heroku, don't provide persistent storage. This means that you lot'll lose your uploaded files when redeploying the application. You'll also lose files if the hosting provider restarts your awarding. Additionally, uploading the files to the aforementioned server means you can't scale your application to more than one case considering the files won't exist across all awarding instances.

Adding a moving-picture show to the model

As in previous chapters, you demand to change the model so you can associate an image with a User. Open the Vapor TIL application in Xcode and open User.swift. Add the following below var email: String:

          @OptionalField(fundamental: "profilePicture") var profilePicture: Cord?                  

This stores an optional String for the image. It volition contain the filename of the user'due south profile movie on deejay. The filename is optional as you're not enforcing that a user has a profile picture show — and they won't have one when they register. Supersede the initializer to account for the new property with the following:

          init(   name: Cord,   username: String,   password: Cord,   siwaIdentifier: Cord? = null,   email: String,   profilePicture: String? = cipher ) {   cocky.name = name   self.username = username   cocky.password = password   cocky.siwaIdentifier = siwaIdentifier   self.email = email   self.profilePicture = profilePicture }                  

Providing a default value of nil for profilePicture allows your app to keep to compile and operate without further source changes.

Note: You could use the user APIs from Google and GitHub to go a URL to the user's profile picture. This would permit you to download the image and store information technology forth side regular users' pictures or save the link. Yet, this is left as an practise for the reader.

You could make uploading a contour picture part of the registration feel, simply this chapter does information technology in a split step. Discover how createHandler(_:) in UsersController doesn't need to modify for the new holding. This is because the route handler uses Codable and sets the belongings to nil if the data isn't nowadays in the Mail service request.

Next, open CreateUser.swift and beneath:

          .field("email", .string, .required)`:                  

add the post-obit:

          .field("profilePicture", .string)                  

This adds a new cavalcade in the database for the profile picture. Note that y'all haven't added the .required constraint every bit the belongings is optional.

Reset the database

As in the by, since you've added a property to User, y'all must reset the database. In Final, run:

          docker rm -f postgres docker rm -f postgres-test docker run --proper name postgres -e POSTGRES_DB=vapor_database \   -eastward POSTGRES_USER=vapor_username \   -due east POSTGRES_PASSWORD=vapor_password \   -p 5432:5432 -d postgres docker run --name postgres-test -e POSTGRES_DB=vapor-test \   -e POSTGRES_USER=vapor_username \   -east POSTGRES_PASSWORD=vapor_password \   -p 5433:5432 -d postgres                  

          docker ps -a                  

Verify the tests

In Xcode, type Control+U to run all the tests. They should all pass.

Creating the form

With the model changed, you can now create a page to allow users to submit a moving-picture show. In Xcode, open WebsiteController.swift. Next, add the following beneath resetPasswordPostHandler(_:information:):

          func addProfilePictureHandler(_ req: Request)    -> EventLoopFuture<View> {     User.find(req.parameters.go("userID"), on: req.db)       .unwrap(or: Arrest(.notFound)).flatMap { user in         req.view.render(           "addProfilePicture",            [             "championship": "Add Contour Picture",              "username": user.name           ]         )     } }                  

          protectedRoutes.get(   "users",    ":userID",    "addProfilePicture",    use: addProfilePictureHandler)                  

          <!-- ane --> #extend("base"):   <!-- 2 -->   #export("content"):     <!-- 3 -->     <h1>#(title)</h1>          <!-- iv -->     <form method="post" enctype="multipart/form-data">       <!-- 5 -->       <div class="form-grouping">         <label for="picture">             Select Picture for #(username)         </label>         <input type="file" proper name="picture"         course="form-control-file" id="picture"/>       </div>        <!-- 6 -->       <button blazon="submit" course="btn btn-primary">         Upload       </button>     </form>   

Share this post