{"id":28451,"date":"2021-05-18T22:01:13","date_gmt":"2021-05-18T22:01:13","guid":{"rendered":"http:\/\/How-To-Upload-Images-in-Sapper-With-Drag-and-Drop"},"modified":"2021-05-18T22:01:13","modified_gmt":"2021-05-18T22:01:13","slug":"how-to-upload-images-in-sapper-with-drag-and-drop","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-images-in-sapper-with-drag-and-drop\/","title":{"rendered":"How To Upload Images in Sapper With Drag and Drop"},"content":{"rendered":"

In this Media Jam, we will discuss how to build an Image Gallery in Sapper with Cloudinary and upload images to Cloudinary with drag and drop operation.<\/p>\n

If you want to jump right into the code, check out the GitHub Repo here<\/a>.<\/p>\n

Sandbox<\/h2>\n

Before we get started, I wanted to point out that you can play around with the code described in this Jam on CodeSandbox<\/a>, and you can find the live version here<\/a>.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

How To Setup and Install a Sapper Project<\/h2>\n

In your project\u2019s root directory, run the following commands in the terminal to quickly set up the initial Sapper project using the sapper-template<\/code>.<\/p>\n

npx degit \"sveltejs\/sapper-template#webpack\"<\/span> sapper-cloudinary-example\ncd sapper-cloudinary-example\nnpm install\nnpm run dev\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Head over to your Cloudinary dashboard and copy the API keys.<\/p>\n
\"Cloudinary<\/p>\n
Create a new file named .env<\/code> in your project\u2019s root directory and paste the API keys in it, as shown below.<\/p>\n
CLOUDINARY_CLOUD=''<\/span>\nCLOUDINARY_KEY= ''<\/span>\nCLOUDINARY_SECRET=''<\/span> \n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To use these environment variables, you will also need to install the dotenv<\/code> package.<\/p>\n
Run the following command to install dotenv<\/code> and cloudinary<\/code> libraries where cloudinary<\/code> is the Node.js\/server-side SDK you will use to upload the images to Cloudinary.<\/p>\n
npm i dotenv cloudinary\n<\/code><\/span><\/pre>\n
How To Display Images on the App<\/h2>\n
The first step is to build the image gallery where you will display all the uploaded images. Create a new file named index.json.js<\/code> inside the src<\/code> directory, where you will create the server route<\/a> to fetch the images from Cloudinary.<\/p>\n
Server routes in Sapper are used to create JSON API, which exports functions,  having HTTP request<\/code> and response<\/code> objects as arguments, corresponding to HTTP methods like GET<\/code>, POST<\/code>, etc.<\/p>\n
You can create both the GET<\/code> method to fetch the images and the POST<\/code> method to upload the image inside the same index.json.js<\/code> file, and Sapper will differentiate between them based on the type of request made.<\/p>\n
Run the following command to create the index.json.js<\/code> file.<\/p>\n
touch src\/routes\/index.json.js\n<\/code><\/span><\/pre>\n
Add the following code to index.json.js<\/code>.<\/p>\n
require<\/span>(\"dotenv\"<\/span>).config();\nconst<\/span> cloudinary = require<\/span>(\"cloudinary\"<\/span>).v2;\n\ncloudinary.config({\n  cloud_name<\/span>: process.env.CLOUDINARY_CLOUD,\n  api_key<\/span>: process.env.CLOUDINARY_KEY,\n  api_secret<\/span>: process.env.CLOUDINARY_SECRET,\n});\n\nexport<\/span>  function<\/span> get<\/span>(req, res<\/span>) <\/span>{\n  res.writeHead(200<\/span>, {\n    \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n  });\n\n  let<\/span> secureUrls;\n\n   cloudinary.api.resources({type<\/span>: 'upload'<\/span>}, function<\/span> (error, result<\/span>) <\/span>{\n    secureUrls = JSON<\/span>.stringify(\n      result.resources.map((pic<\/span>) =><\/span> {\n        return<\/span> { secureUrl<\/span>: pic.secure_url };\n      })\n    );\n\n    res.end(secureUrls);\n  });\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The image URLs are sent as a JSON response to the GET<\/code> request. These URLs are then used within the src<\/code> attribute of the img<\/code> tag to display the images on the app.<\/p>\n
Update the src\/routes\/index.svelte<\/code> file like this.<\/p>\n
<script<\/span> context<\/span>=\"module\"<\/span>><\/span>\n\texport<\/span> function<\/span> preload<\/span>(<\/span>) <\/span>{\n\t  return<\/span> this<\/span>.fetch(`\/index.json`<\/span>)\n\t\t.then((r<\/span>) =><\/span> r.json())\n\t\t.then((images<\/span>) =><\/span> {\n\t\t  return<\/span> { images };\n\t\t});\n\t}\n  <\/span><\/script<\/span>><\/span>\n  \n  <script<\/span>><\/span>\n\texport<\/span> let<\/span> images;\n  <\/span><\/script<\/span>><\/span>\n  \n  <svelte:head<\/span>><\/span>\n\t<title<\/span>><\/span>Sapper Cloudinary Example<\/title<\/span>><\/span>\n  <\/svelte:head<\/span>><\/span>\n  <h2<\/span>><\/span>Sapper Image Gallery<\/h2<\/span>><\/span>\n\n  <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n\t{#each images as image (image.secureUrl)}\n\t  <section<\/span> class<\/span>=\"image\"<\/span>><\/span>\n\t\t<img<\/span> src<\/span>={image.secureUrl}<\/span> alt<\/span>={image.secureUrl}<\/span> width<\/span>=\"400px\"<\/span> \/><\/span>\n\t  <\/section<\/span>><\/span>\n\t{\/each}\n  <\/div<\/span>><\/span>\n  \n  <style<\/span>><\/span>\n\th2<\/span> {\n\t  font-size<\/span>: 2.4em<\/span>;\n\t  text-transform<\/span>: uppercase;\n\t  font-weight<\/span>: 400<\/span>;\n\t  margin<\/span>: 0<\/span> 0<\/span> 0.5em<\/span> 0<\/span>;\n\t  text-align<\/span>: center;\n\t}\n\n.container<\/span> {\n    column-count<\/span>: 3<\/span>;\n    column-gap<\/span>: 20px<\/span>;\n  }\n  section<\/span> > img<\/span> {\n    flex<\/span>: 100%<\/span>;\n    max-width<\/span>: 100%<\/span>;\n    margin-top<\/span>: 1rem<\/span>;\n    border-radius<\/span>: 10px<\/span>;\n  }\n  .image<\/span> {\n    margin-bottom<\/span>: 1rem<\/span>;\n    display<\/span>: flex;\n  }\n\n  @media<\/span> only<\/span> screen and<\/span> (max-width:<\/span> 600px<\/span>) {\n    .container<\/span> {\n      column-count<\/span>: 1<\/span>;\n    }\n  }\n  <\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
<script<\/span> context<\/span>=\"module\"<\/span>><\/span>\n  export<\/span> function<\/span> preload<\/span>(<\/span>) <\/span>{\n    return<\/span> this<\/span>.fetch(`\/index.json`<\/span>)\n      .then((r<\/span>) =><\/span> r.json())\n      .then((images<\/span>) =><\/span> {\n        return<\/span> { images };\n      });\n  }\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
{#each images as image (image.secureUrl)}\n<section<\/span> class<\/span>=\"image\"<\/span>><\/span>\n  <img<\/span> src<\/span>=\"{image.secureUrl}\"<\/span> alt<\/span>=\"{image.secureUrl}\"<\/span> width<\/span>=\"400px\"<\/span> \/><\/span>\n<\/section<\/span>><\/span>\n{\/each}\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here is how this Sapper Image Gallery<\/strong> looks like.<\/p>\n
\"Sapper<\/p>\n
How To Upload Images to Cloudinary<\/h2>\n
In this section, we will write the code to upload the image to Cloudinary and then show it in the Image Gallery created in the last section.<\/p>\n
Update the script<\/code> tag in index.svelte<\/code> file like this.<\/p>\n
<script<\/span>><\/span>\n  export<\/span> let<\/span> images;\n  let<\/span> preview, fileinput;\n\n  const<\/span> onFileSelected = (e<\/span>) =><\/span> {\n    let<\/span> image = e.files[0<\/span>];\n    let<\/span> reader = new<\/span> FileReader();\n    reader.readAsDataURL(image);\n    reader.onload = (e<\/span>) =><\/span> {\n      preview = e.target.result;\n    };\n  };\n\n  const<\/span> uploadImage = ()<\/span> =><\/span> {\n    uploadImageToCloudinary(preview);\n  };\n\n  const<\/span> uploadImageToCloudinary = async<\/span> (imageDataUrl) => {\n    const<\/span> res = await<\/span> fetch(\"\/index.json\"<\/span>, {\n      method<\/span>: \"POST\"<\/span>,\n      headers<\/span>: {\n        \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n      },\n      body<\/span>: JSON<\/span>.stringify({ imageDataUrl }),\n    });\n    const<\/span> json = await<\/span> res.json();\n    if<\/span> (json.imageUrl) {\n      window<\/span>.location.reload();\n    }\n  };\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The files<\/code> object containing the selected file, obtained either from the FileList<\/code> object when the user selects a file using the <input><\/code> element or drag and drop operations\u2019 DataTransfer<\/code> object is passed to the FileReader<\/code> Web API. In this project, you will use both the <input><\/code> element and drag and drop operation.<\/p>\n
The FileReader<\/code> Web API reads the user\u2019s selected file and then converts it to a data:<\/code> URL using the .readAsDataURL()<\/code> method. You can read more about this method here<\/a>.<\/p>\n
Using the .onload()<\/code> method of FileReader,<\/code> triggered each time the reading operation is successfully completed, the data:<\/code> URL is stored inside the preview<\/code> variable.<\/p>\n
You have created another function named uploadImageToCloudinary ()<\/code> which takes the data URL as an argument and makes a POST<\/code> request to \/index.json<\/code> using the fetch<\/code> API. The data URL is sent to the server route as a JSON object.<\/p>\n
Once the image has been uploaded, and a successful response is returned from the POST request, the entire page is reloaded to trigger the Sapper\u2019s preload()<\/code> function to update the Image Gallery with the newly uploaded image.<\/p>\n
Add the code for the Upload component before the code for Image Gallery in the index.svelte<\/code> file.<\/p>\n
<div<\/span> class<\/span>=\"app\"<\/span>><\/span>\n  <h2<\/span>><\/span>Upload Image<\/h2<\/span>><\/span>\n  <div<\/span>\n    class<\/span>=\"dropzone\"<\/span>\n    on:click<\/span>={()<\/span> =><\/span> {\n      fileinput.click();\n    }}\n    on:drop={(e) => {\n      e.preventDefault();\n      onFileSelected(e.dataTransfer);\n    }}\n    on:dragenter={(e) => {\n      e.preventDefault();\n    }}\n    on:dragleave={(e) => {\n      e.preventDefault();\n    }}\n    on:dragover={(e) => {\n      e.preventDefault();\n    }}\n  >\n    {#if preview}\n      <img<\/span> class<\/span>=\"preview\"<\/span> src<\/span>={preview}<\/span> alt<\/span>=\"preview\"<\/span> \/><\/span>\n    {\/if}\n\n    <img<\/span>\n      class<\/span>=\"upload-icon\"<\/span>\n      src<\/span>=\"https:\/\/static.thenounproject.com\/png\/625182-200.png\"<\/span>\n      alt<\/span>=\"\"<\/span>\n      on:click<\/span>={()<\/span> =><\/span> {\n        fileinput.click();\n      }}\n    \/>\n    <input<\/span>\n      style<\/span>=\"display:none\"<\/span>\n      type<\/span>=\"file\"<\/span>\n      accept<\/span>=\".jpg, .jpeg, .png\"<\/span>\n      on:change<\/span>={(e)<\/span> =><\/span> onFileSelected(e.target)}\n      bind:this={fileinput}\n    \/>\n    {#if !preview}\n      <div<\/span>\n        class<\/span>=\"chan\"<\/span>\n        on:click<\/span>={()<\/span> =><\/span> {\n          fileinput.click();\n        }}\n      >\n        Drag N Drop Images or Click on Upload.\n      <\/div<\/span>><\/span>\n    {\/if}\n  <\/div<\/span>><\/span>\n  {#if preview}\n    <button<\/span>\n      on:click<\/span>={()<\/span> =><\/span> {\n        uploadImage();\n      }}>Upload Image<\/button<\/span>\n    ><\/span>\n  {\/if}\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the above code, you create a div<\/code> element with class="app"<\/code>. In this div<\/code> element, you add the event handlers<\/a> required for the drag and drop operation. The on:dragenter<\/code>, on:dragover<\/code>, and on:dragover<\/code> event just the page from reloading. The on:drop()<\/code> event, triggered when the file is dropped on the div<\/code>,  passes the DataTransfer<\/code> object to the onSelectedFile()<\/code> function.<\/p>\n
You bind the fileinput<\/code> variable to the input<\/code> element to get a reference to the input<\/code> element. This input<\/code> element only accepts .jpg, .jpeg, .png<\/code> image types. You can change the accepted image types according to your application needs.<\/p>\n
When the upload icon is clicked, the on:click()<\/code> event is triggered, which runs the fileinput.click()<\/code> function and the user is prompted to select the image.<\/p>\n
After the user has selected the image, the on:change()<\/code> event of the input<\/code> element is triggered, which passes the FileList<\/code> object to the onSelectedFile()<\/code> function.<\/p>\n
Whether an image is selected or not, either the Upload button is displayed or the text Drag N Drop Images or Click on Upload.<\/code> is shown using the if<\/code> block and preview<\/code> variable.<\/p>\n
Here is how the Upload Component looks when no file is selected.<\/p>\n
\"No<\/p>\n
Here is how the Upload Component changes if an image is selected.<\/p>\n
\"File<\/p>\n
When the upload button is clicked, the uploadImage()<\/code> function sends the POST request to the \/index.json<\/code> server route with the data URL of the image in the request body, and the image is uploaded to Cloudinary.<\/p>\n
In the above code, you are sending the image data URL as a JSON request body.  To parse this JSON request body in the POST<\/code> request, you will need to install the body-parser<\/code> package. You can read more about this library here<\/a>.<\/p>\n
Run the following command in your terminal to install body-parser<\/code>.<\/p>\n
npm install body-parser\n<\/code><\/span><\/pre>\n
You will also need to update the src\/server.js<\/code> file to include the body-parser<\/code> library.<\/p>\n
import<\/span> sirv from<\/span> \"sirv\"<\/span>;\nimport<\/span> polka from<\/span> \"polka\"<\/span>;\nimport<\/span> compression from<\/span> \"compression\"<\/span>;\nimport<\/span> * as<\/span> sapper from<\/span> \"@sapper\/server\"<\/span>;\nconst<\/span> bodyParser = require<\/span>(\"body-parser\"<\/span>);\n\nconst<\/span> { PORT, NODE_ENV } = process.env;\nconst<\/span> dev = NODE_ENV === \"development\"<\/span>;\n\npolka() \/\/ You can also use Express<\/span>\n  .use(\n    bodyParser.json({\n      limit<\/span>: \"50mb\"<\/span>,\n      extended<\/span>: true<\/span>,\n    }),\n    bodyParser.urlencoded({\n      limit<\/span>: \"50mb\"<\/span>,\n      extended<\/span>: true<\/span>,\n    }),\n\n    compression({ threshold<\/span>: 0<\/span> }),\n    sirv(\"static\"<\/span>, { dev }),\n    sapper.middleware()\n  )\n  .listen(PORT, (err) => {\n    if<\/span> (err) console<\/span>.log(\"error\"<\/span>, err);\n  });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The last step is to create the POST<\/code> method in the index.json.js<\/code> file or the \/index.json<\/code> server route.<\/p>\n
Add the following code for the POST<\/code> method in the index.json.js<\/code>  file.<\/p>\n
export<\/span> function<\/span> post<\/span>(req, res<\/span>) <\/span>{\n  const<\/span> image = req.body.imageDataUrl;\n\n  res.writeHead(200<\/span>, {\n    \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n  });\n\n  cloudinary.uploader.upload(image).then((response<\/span>) =><\/span> {\n    res.end(JSON<\/span>.stringify({ imageUrl<\/span>: response.secure_url }));\n  });\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can also pass additional and optional parameters to the Upload API like the upload_preset<\/code>, signature<\/code>, folder<\/code>, etc.<\/p>\n
\"Demo<\/p>\n
Conclusion<\/h2>\n
In this Media Jam, we discussed how to build an Image Gallery in Sapper with images being fetched from Cloudinary. We also saw how to upload images to Cloudinary using both the <input><\/code> element and drag and drop operation.<\/p>\n
Here are some additional resources that can be helpful:<\/p>\n
The above code uses Cloudinary\u2019s Upload API<\/a> to upload the image to Cloudinary. After a successful response, the Cloudinary URL of the image is returned as a JSON response.<\/p>\n
You can refer to the code to style the Upload component here<\/a>.<\/p>\n
Before uploading the image to Cloudinary, the web application needs to read the selected picture; this is done with the help of FileReader Web API<\/a>.<\/p>\n
To display the images, you iterate over the images<\/code> array, exported from the script<\/code> tag, using the each<\/code> block. You can read more about each<\/code> block here<\/a>.<\/p>\n
You use Sapper\u2019s preload()<\/a> function to fetch the images using this.fetch()<\/code> method. This preload()<\/code> function runs before the component is created and loads the data, i.e., images required by the gallery before the page is loaded.<\/p>\n
In the above code, you first access the environment variables using require("dotenv").config();<\/code> and pass them to cloudinary<\/code>. Then, you create and export the get<\/code> function where the images are fetched from Cloudinary using Cloudinary\u2019s Admin API<\/a>.<\/p>\n
The last command will start the Sapper development server on http:\/\/localhost:3000\/<\/a>.<\/p>\n