Comments (7)
I found some solution but I'm not able do what I need. The function is not async and I need to generate url on server.
from react-dropzone-component.
Hey, Dropzone actually supports that feature: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically
from react-dropzone-component.
Hi, this is not what I need. Problem is that generating the URL is async event and can't return the value. I need callback or the promise support. I do some hack and solve this by modifying function done(error, url) in accept callback in dropzone.
If you would like to know more, let me know :)
M.
from react-dropzone-component.
Hm, sorry about that - I don't think we can do anything about that though, given that we're just wrappen Dropzone here. Have you considered reporting your issue over at Dropzone?
from react-dropzone-component.
I made some dirty hacks and now I have problem with AWS S3 :)
Sending issue to the Dropzone sounds like good idea...
M.
from react-dropzone-component.
Running into the same issue. Has anyone figured out a good solution?
from react-dropzone-component.
This is what I ended up doing.
const dropZoneConfig = {
autoProcessQueue: false,
init: function () {
this.on('addedfile', function (file) {
let _this = this;
fetch(`${Config.apiBase}/images/cache/presign`).then(function (response) {
response.json().then(function (json) {
// Add formdata to param options
// https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L1222
Object.assign(_this.options.params, json.fields);
// Update url to s3 endpoint
_this.options.url = json.url;
_this.processQueue();
});
});
});
},
};
By setting autoProcessQueue to false, you can start the upload to s3 process after you fetch the presign data.
And a somewhat liberal CORS policy just to get the ball rolling.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
from react-dropzone-component.
Related Issues (20)
- How to restrict image upload size to 5MB
- Allow to upload only pdf files works on desktop but doesn't work on mobile phone's?
- What is the correct latest version? HOT 2
- React 16 migration (lifecycle methods) HOT 3
- Params do not works HOT 2
- How do I append file(s) to formData? HOT 1
- I need to set withCredentials property to true. How can I do that using provided API?
- How can we updated group permissions using PNP HOT 5
- Trigger success indicator (checkmark) appear when using 'no-url' option
- how get upload progress value in djsConfig
- findDOMNode is deprecated in StrictMode.
- Unable to set dynamic acceptedFiles in react-dropzone-component HOT 2
- next/image is not working with react-dropzone-component
- Pass more parameters in useDropzone
- how to set inital files HOT 2
- Upload .pptx file using Dropzone
- 'DropzoneComponent' does not have any construct or call signatures HOT 2
- Inappropriate file formats are attached on the android phone HOT 1
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Issue with disabling drag and drop functionality
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dropzone-component.