{"id":28249,"date":"2021-06-02T08:55:02","date_gmt":"2021-06-02T08:55:02","guid":{"rendered":"http:\/\/How-to-Upload-Images-in-Vue.js-with-Drag-N-Drop"},"modified":"2025-02-08T17:07:30","modified_gmt":"2025-02-09T01:07:30","slug":"how-to-upload-images-in-vue-js-with-drag-n-drop","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-upload-images-in-vue-js-with-drag-n-drop\/","title":{"rendered":"How to Upload Images in Vue.js with Drag N Drop"},"content":{"rendered":"

Introduction<\/h2>\n

According to the Stack Overflow 2020 survey, Vue.js<\/a> was one of the developer\u2019s Most Loved Web frameworks<\/a>. In this media jam, we will see how to upload an image to Cloudinary in Vue.js with a drag and drop operation.<\/p>\n

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

CodeSandbox<\/h2>\n<\/div>\n \n
\n <\/iframe>\n <\/div>\n\n

Setup<\/h2>\n

In this tutorial, you will use Vue CLI<\/a> to create the initial Vue.js project. Run the following command to install the Vue CLI.<\/p>\n

npm<\/span> install<\/span> -g<\/span> @vue<\/span>\/cli\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Now, create a Vue.js project named vue-image-upload<\/code> by running the following command in the terminal.<\/p>\n
vue create vue-image-upload\n<\/code><\/span><\/pre>\n
When prompted to choose the preset, the Default (Vue 3) ([Vue 3] babel, eslint)<\/code> preset.<\/p>\n
Vue<\/span> CLI<\/span> v4<\/span>.5<\/span>.13<\/span>\n? Please<\/span> pick<\/span> a<\/span> preset<\/span>:\n  Default<\/span> ([Vue 2]<\/span> babel<\/span>, eslint<\/span>)\n> Default<\/span> (Vue<\/span> 3) ([Vue 3]<\/span> babel<\/span>, eslint<\/span>)\n  Manually<\/span> select<\/span> features<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
After the project has been created, run the following command to start the development server.<\/p>\n
cd vue-image-upload\nnpm run serve\n<\/code><\/span><\/pre>\n
Navigate to http:\/\/localhost:8080\/<\/a> in your browser, here is how your app will look like.<\/p>\n
\"Vue.js<\/p>\n
Update the src\/App.vue<\/code> file to clean the sample code like this.<\/p>\n
<template<\/span>><\/span>\n  <h1<\/span>><\/span>Vue Image Upload<\/h1<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nexport<\/span> default<\/span> {\n  name<\/span>: \"App\"<\/span>,\n  components<\/span>: {},\n};\n<\/span><\/script<\/span>><\/span>\n\n<style<\/span>><\/span>\n#app<\/span> {\n  font-family<\/span>: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing<\/span>: antialiased;\n  -moz-osx-font-smoothing<\/span>: grayscale;\n  text-align<\/span>: center;\n  color<\/span>: #2c3e50<\/span>;\n  margin-top<\/span>: 60px<\/span>;\n}\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here is how your app will look like now.<\/p>\n
\"Cleaned<\/p>\n
Head over to Settings \u2192 Upload \u2192 Upload presets<\/strong> on your Cloudinary dashboard and create an unsigned preset if one doesn\u2019t already exist and copy it.<\/p>\n
\"Cloudinary<\/p>\n
Create a file named .env<\/code> by running the following command to store your Cloudinary cloud name and Upload Preset securely.<\/p>\n
touch<\/span> .env<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Paste the cloud name and upload preset to the .env<\/code> file.<\/p>\n
VUE_APP_CLOUD_NAME =""\nVUE_APP_UPLOAD_PRESET = ""\n<\/code><\/pre>\n
How To Drag N Drop Images in Vue.js<\/h2>\n
In this section, you will build the dropzone for dragging and dropping the images. You will use HTML5 Drag and Drop API<\/a> to make this dropzone.<\/p>\n
Update App.vue<\/code> file like this.<\/p>\n
<template<\/span>><\/span>\n  <h1<\/span>><\/span>Vue Image Upload<\/h1<\/span>><\/span>\n\n  <div<\/span>\n    class<\/span>=\"dropzone\"<\/span>\n    @dragover.prevent<\/span>\n    @dragenter.prevent<\/span>\n    @dragstart.prevent<\/span>\n    @drop.prevent<\/span>=\"handleFileChange($event.dataTransfer)\"<\/span>\n  ><\/span>\n    <input<\/span>\n      id<\/span>=\"file-input\"<\/span>\n      type<\/span>=\"file\"<\/span>\n      accept<\/span>=\"image\/png, image\/jpeg\"<\/span>\n      @change<\/span>=\"handleFileChange($event.target)\"<\/span>\n      required<\/span>\n    \/><\/span>\n    <h2<\/span> for<\/span>=\"file-input\"<\/span>><\/span>Click or Drag N Drop Image<\/h2<\/span>><\/span>\n    <img<\/span> v-bind:src<\/span>=\"preview\"<\/span> \/><\/span>\n    <h3<\/span> v-if<\/span>=\"preview\"<\/span>><\/span>File name: {{ fileName }}<\/h3<\/span>><\/span>\n  <\/div<\/span>><\/span>\n\n  <button<\/span> type<\/span>=\"submit\"<\/span> v-on:click<\/span>=\"upload\"<\/span>><\/span>Upload<\/button<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nexport<\/span> default<\/span> {\n  name<\/span>: \"App\"<\/span>,\n  data() {\n    return<\/span> {\n      fileName<\/span>: \"\"<\/span>,\n      preview<\/span>: null<\/span>,\n      preset<\/span>: process.env.VUE_APP_UPLOAD_PRESET,\n      formData<\/span>: null<\/span>,\n      cloudName<\/span>: process.env.VUE_APP_CLOUD_NAME,\n      success<\/span>: \"\"<\/span>,\n    };\n  },\n  methods<\/span>: {\n    handleFileChange<\/span>: function<\/span> (event<\/span>) <\/span>{\n      this<\/span>.file = event.files[0<\/span>];\n      this<\/span>.fileName = this<\/span>.file.name;\n\n      this<\/span>.formData = new<\/span> FormData();\n      this<\/span>.formData.append(\"upload_preset\"<\/span>, this<\/span>.preset);\n\n      let<\/span> reader = new<\/span> FileReader();\n      reader.readAsDataURL(this<\/span>.file);\n\n      reader.onload = (e<\/span>) =><\/span> {\n        this<\/span>.preview = e.target.result;\n        this<\/span>.formData.append(\"file\"<\/span>, this<\/span>.preview);\n      };\n    },\n  },\n};\n<\/span><\/script<\/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 dropzone for dropping the images using @dragover<\/code>, @dragenter<\/code>, @dragstart<\/code>, and @drop<\/code> event handlers. The function handleFileChange()<\/code> is triggered when selecting an image either by drag and drop operation or using the input<\/code> element.<\/p>\n
If an image is dropped in the dropzone, the DataTransfer<\/code> object is passed to the handleFileChange()<\/code> function. If a user selects an image using the input<\/code> element, the target<\/code> object is passed to the handleFileChange()<\/code> function.<\/p>\n
The FileReader<\/code> API converts the image to a Data URL<\/a> using readAsDataURL()<\/code> and onload()<\/code> functions and is stored inside the preview<\/code> variable. You can read more about readAsDataURL()<\/code> here<\/a>.<\/p>\n
You also store the name of the image in a variable named fileName<\/code>. Both the name and the image selected are displayed to the user using the v-if<\/code> directive. You can read more about this directive here<\/a>.<\/p>\n
The data URL of the image or preview<\/code> variable is appended to a FormData<\/a> along with the upload_preset<\/code>. This formData<\/code> is sent to the API in the request body when the user clicks the Upload<\/code> button triggering the upload()<\/code> function. You will create the upload()<\/code> function in the next section.<\/p>\n
Here is how your app will look like.<\/p>\n
\"App<\/p>\n
Here is how your app looks after selecting or dragging\/dropping an image. You can see the chosen image and its name on the app with the help of the fileName<\/code> and preview<\/code> variables.<\/p>\n
\"App<\/p>\n
You can style the app by copying and pasting the following code to the style<\/code> section.<\/p>\n
<style<\/span>><\/span>\n#app<\/span> {\n  font-family<\/span>: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing<\/span>: antialiased;\n  -moz-osx-font-smoothing<\/span>: grayscale;\n  text-align<\/span>: center;\n  color<\/span>: #2c3e50<\/span>;\n  margin-top<\/span>: 60px<\/span>;\n    display<\/span>: flex;\n  flex-direction<\/span>: column;\n\n}\n.dropzone<\/span> {\n  height<\/span>: fit-content;\n  min-height<\/span>: 200px<\/span>;\n  max-height<\/span>: 400px<\/span>;\n  width<\/span>: 600px<\/span>;\n  background<\/span>: #fdfdfd<\/span>;\n  border-radius<\/span>: 5px<\/span>;\n  border<\/span>: 2px<\/span> dashed #000<\/span>;\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  justify-content<\/span>: center;\n  align-items<\/span>: center;\n  margin<\/span>: 0<\/span> auto;\n}\ninput<\/span>[type=\"file\"<\/span>]<\/span> {\n  position<\/span>: absolute;\n  opacity<\/span>: 0<\/span>;\n  width<\/span>: inherit;\n  min-height<\/span>: 200px<\/span>;\n  max-height<\/span>: 400px<\/span>;\n  cursor<\/span>: pointer;\n}\n\nimg<\/span> {\n  width<\/span>: 50%<\/span>;\n  height<\/span>: 50%<\/span>;\n}\nbutton<\/span> {\n  background-color<\/span>: transparent;\n  border<\/span>: 2px<\/span> solid #e74c3c<\/span>;\n  border-radius<\/span>: 1em<\/span>;\n  color<\/span>: #e74c3c<\/span>;\n  cursor<\/span>: pointer;\n  display<\/span>: flex;\n  align-self<\/span>: center;\n  font-size<\/span>: 1rem<\/span>;\n  margin<\/span>: 20px<\/span>;\n  padding<\/span>: 1.2em<\/span> 2.4em<\/span>;\n  text-align<\/span>: center;\n  text-transform<\/span>: uppercase;\n  font-family<\/span>: \"Montserrat\"<\/span>, sans-serif;\n  font-weight<\/span>: 700<\/span>;\n}\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
\"App<\/p>\n
How To Upload the Image to Cloudinary<\/h2>\n
Under script<\/code> \u2192 methods<\/code> create a function named upload<\/code> that makes a POST request to https:\/\/api.cloudinary.com<\/a> with the request body being formData<\/code> containing the file<\/code> or data URL and the unsigned upload_preset<\/code>.<\/p>\n
upload: async<\/span> function<\/span> (<\/span>) <\/span>{\n\t\tconst<\/span> res = await<\/span> fetch(\n\t\t  `https:\/\/api.cloudinary.com\/v1_1\/${this<\/span>.cloudName}<\/span>\/image\/upload`<\/span>,\n\t\t  {\n\t\t    method<\/span>: \"POST\"<\/span>,\n\t\t    body<\/span>: this<\/span>.formData,\n\t\t  }\n\t\t);\n\t\tconst<\/span> data = await<\/span> res.json();\n\t\tthis<\/span>.fileName = \"\"<\/span>;\n\t\tthis<\/span>.preview = null<\/span>;\n\t\tthis<\/span>.formData = null<\/span>;\n\t\tthis<\/span>.success = data.public_id;\n},\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
After sending the POST request, you reset fileName<\/code>, preview<\/code>, and formData<\/code> to their initial values. You also store the public_id<\/code> of the image in the success<\/code> variable, which is then displayed to the user.<\/p>\n
Add the following code after the button<\/code> in the template<\/code> section. This code is displayed after a successful response is returned from the API, and success<\/code> is not equal to empty strings.<\/p>\n
<h3<\/span> v-if<\/span>=\"success\"<\/span>><\/span>File Uploaded Successfully. publicId: {{success}}<\/h3<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Here is the entire upload operation in action.<\/p>\n
\"Upload<\/p>\n
After successful upload, the public_id<\/code> of the image is displayed on the app.<\/p>\n
Conclusion<\/h2>\n
In this media jam, we saw how to upload images to Cloudinary in Vue.js with drag and drop operation.\nYou uploaded a picture with an unsigned preset in this jam, but you can also upload a picture with a signed preset. For this, you will need to append api_key<\/code>, timestamp<\/code>, and signature<\/code> in the form data along with the file<\/code>.<\/p>\n
Here are some additional resources that can be helpful:<\/p>\n
You can also use UI libraries like BootstrapVue<\/a>, Vuetify<\/a>, etc., to style the app. Here is how your app will look like.<\/p>\n
This function uses FileReader<\/code> API to read the contents of the image and convert it to a data URL<\/a> from a File<\/code> Object. File objects are obtained either from a FileList<\/code> object returned due to a user selecting files using the <input><\/code> element or from a drag and drop operation\u2019s DataTransfer<\/code> object.<\/p>\n
In this tutorial, you will upload the image with a POST request to the Cloudinary REST API. For this, you will need to create an unsigned preset<\/a> to upload without any authentication signature.<\/p>\n