Stack Overflow
Stack Overflow

Questions tagged [dropzone.js]

An open-source javascript library which provides drag-and-drop file uploads with image previews

Dropzone.js is a light weight library that turns an element into a dropzone. This means that a user can drag and drop a file onto it, and the file is uploaded to the server by . It supports all major browsers (IE, FireFox, Chrome, Safari, Opera) natively and has legacy file input support for others.

Starting with version 2.0 this library no longer depends on , but it still registers itself as a module if available.

This tag should be used for questions about the usage of the Dropzonejs API in web development.

Relevant Links:

2258 questions
13
votes
1 answer

Dropzone check image dimension and file size

I'm using the Dropzonejs plugin. I want to check the image dimension (width and height) and also the file size when a file is uploaded. I managed to check the dimension and file size but when I combined both of them, it didn't work well. var…
hahahaha
  • 1,013
  • 2
  • 14
  • 41
13
votes
3 answers

React-Dropzone image preview not showing

Using react-dropzone (https://www.npmjs.com/package/react-dropzone) and getting files logging to the console, but can't get image preview to populate on state change. Any idea what I'm doing wrong? export default class JoinForm extends Component { …
megkadams
  • 717
  • 1
  • 10
  • 19
13
votes
2 answers

hapi.js Cors Pre-flight not returning Access-Control-Allow-Origin header

I have an ajax file upload using (Dropzone js). which sends a file to my hapi server. I realised the browser sends a PREFLIGHT OPTIONS METHOD. but my hapi server seems not to send the right response headers so i am getting errors on chrome. here is…
kweku360
  • 1,025
  • 1
  • 10
  • 7
13
votes
1 answer

Rails: Uploading dropzone, S3, carrierwave, not working in Safari, but works in Google Chrome

I'm using dropzone with S3 and carrierwave. I'm able to upload images through Google Chrome, but I can't get it to work with Safari, which is weird. This is my form = nested_form_for @trip, html: { multipart: true, id: 'fileupload', class:…
hellomello
  • 8,219
  • 39
  • 151
  • 297
13
votes
2 answers

Dropzone thumbnail width image size

How do I change the thumbnail size of uploaded images? I have tried thumbnailWidth:"350" in my javascript, However that does not increase the thumbnail size, rather the thumbnail just looks zoomed in on. How do I go about manipulating the image…
Crisp
  • 257
  • 1
  • 2
  • 9
12
votes
6 answers

How to manually trigger click for Dropzone (open select file dialog)

Dropzone only works on the element itself i have an SPAN tag inside my button, and when i click on the text it won't trigger click on parent element which dropzone is attached to. i tried the following but it doesn't…
Pezhvak
  • 9,633
  • 7
  • 29
  • 39
12
votes
3 answers

Uploading an image with redux-form

I have a react.js redux-form that works and posts data back to my API but I need to also allow the submitter to upload an image with the form, ideally with a preview. I struggled a bit and have arrived at dropzone.js but I can't seem to get my form…
RusHughes
  • 1,191
  • 2
  • 12
  • 17
12
votes
1 answer

jQuery add URL parameter

I have a jquery multiple drag and drop file uploader using dropzone.js. I have added the following code to the dropzone code this.on("queuecomplete", function (file) { alert("&success=yes"); }); So when the queue has completed it sends…
Legend1989
  • 664
  • 3
  • 9
  • 23
12
votes
2 answers

Dropzone not bound to model

I'm using dropzone.js to upload files in a form that include other fields. @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.DropDownListFor(x => x.installation, Model.installationList, new { data_placeholder = "Select one item…
clement
  • 4,204
  • 10
  • 65
  • 133
12
votes
7 answers

dropzone.js Suppress progress bar when retrieving from server

Using dropzone.js, I've had no issues getting it to work, including retrieving images already previously uploaded to the server. The only problem I have is when I retrieve those files from the server on a page refresh (meaning they weren't…
tllewellyn
  • 903
  • 2
  • 7
  • 28
12
votes
4 answers

How to cancel/abort upload in Dropzone.js if condition is not fulfilled?

I'm using Dropzone.js to upload files. Now I want to check a filed is filled or not, and if it isn't then cancel the upload. My HTML code:
netdjw
  • 5,419
  • 21
  • 88
  • 162
12
votes
6 answers

Dropzone Resize Function

I have implemented a dropzone page using http://www.dropzonejs.com/ I am having trouble with the resize functionality. My images are constantly cropped if they are of the wrong aspect ratio. I am wondering two things: Can i configure dropzone to…
user3237002
  • 121
  • 1
  • 1
  • 5
12
votes
6 answers

How do I refresh the page after dropzone,js upload?

I'm using dropzone.js to enable drag and drop to my fileupload. I've set autoProcessQueues to false, and I'm running the processQueue command on all files added to the upload container. Is there any way to refresh the page after all of the files has…
user1828871
  • 181
  • 1
  • 2
  • 10
11
votes
5 answers

How to destroy dropdzonejs?

How to destroy dropdzonejs? When I have SPA and leave the page, I want to clean up so it does not listen to body events anymore.
Victoria A
  • 111
  • 1
  • 6
11
votes
1 answer

Dropzone no url provided / Dropzone already attached

I feel like I am loosing my mind here. I have read all the threads relating to my issue, I have added the "Dropzone.autoDiscover = false;" but nothing seems to work. I keep getting : Uncaught Error: No URL provided. & Uncaught Error: Dropzone…
Gavin Wood
  • 955
  • 3
  • 14
  • 28
1 2 3
…
99 100