I use react-dropzone-uploader (https://www.npmjs.com/package/react-dropzone-uploader).
It allow upload images through dropzone.
This solution was great.
Usually, when I choose images, it upload files to https://httpbin.org/post (for validation (?)).
But now whichever image I choose (even those that were successfully uploaded earlier), this request fails with status 413 (Request Entity Too Large Error). My images aren't large.
This error occurs both in my locale solution and in the examples from quick start tutorial.
You can see error on https://react-dropzone-uploader.js.org/docs/quick-start. Just try to upload some images and see Network in DevTools.
Related
I have a zipped file containing images which I am sending as response to a python REST API call. I want to create a rest application which consumes the python rest api in this manner: The response's content should be extracted without downloading (in browser side) and all the images should be displayed to the user. Is this possible? If yes, could you please help me in the implementation? I am unable to find help anywhere.
I think what you are trying to do is have a backend server (python) where zip files of images are hosted. You need to create an application (that could be in react) that
Send HTTP calls to the server get those .zip files.
Unzip them. How to unzip file on javascript
Display the images to the user. https://medium.com/better-programming/how-to-display-images-in-react-dfe22a66d5e7
I'm not sure what utf-8 has to do with this, but this is possible. A quick google gave me the results above.
I am trying to upload Image/Video files into S3 bucket from my React JS application. So I refered some of the React S3 uploader npm packages react-dropzone-s3-uploader , react-s3-uploader-multipart. But both are keep giving Errors while importing into React JS component. And I have already post this error message on my another stack question (please refer this qus). I would like to do this multipart upload directly from my React application to S3 bucket. If anyone knows the solution please share with me.
Thanks in advance.
The only lib which worked perfectly and supported AWS S3 multipart with minimum work was Uppy for me. Highly recommended to try out:
https://uppy.io/docs/aws-s3-multipart/
you will need to provide couple endpoints for it though, so read the docs. You will see "Companion" mentioned there, you can easily ignore it, provide 5 needed endpoints of your custom API and it will be all good. I would suggest to run the UI part, puth in some dummy URLs for these 5 functions and check network activity of the browser to faster understand how it works.
A function that calls the S3 Multipart API to create a new upload
A function that calls the S3 Multipart API to list the parts of a file that have already been uploaded
A function that generates a batch of signed URLs for the specified part numbers
A function that calls the S3 Multipart API to abort a Multipart upload, and removes all parts that have been uploaded so far
A function that calls the S3 Multipart API to complete a Multipart upload, combining all parts into a single object in the S3 bucket
Yet no matter what way you would build multipart upload, you will always need to start the upload, list parts, get signed URLs to upload each part, cancel the upload & complete. So it will never be 3 minutes task to build this, but with Uppy i had most of success.
You can use React Dropzone Uploader, which gives you file previews (including image thumbnails) out of the box, and also handles uploads for you.
Uploads have progress indicators, and they can be cancelled or restarted. The UI is fully customizable.
Here's an example of how to upload files directly to an S3 bucket, using pre-signed URLs.
Full disclosure: I wrote this library.
Here’s a way to do it full stack MERN with express file upload. Server code here is minimal. This might be helpful, if not, no worries!
https://link.medium.com/U1SdsoHMy2
I am trying to upload a file using jmeter on the front end. There are three files that are need to be uploaded and then the Submit button will be enabled. Is there any way to it through jmeter?
I am able to do it from the back end. But i want to use the URL of the website through Jmeter in order to do performance testing of the website.
As per very main page of the Apache JMeter project:
JMeter is not a browser.
As far as web-services and remote services are concerned, JMeter looks like a browser (or rather, multiple browsers); however JMeter does not perform all the actions supported by browsers. In particular, JMeter does not execute the Javascript found in HTML pages. Nor does it render the HTML pages as a browser does (it's possible to view the response as HTML etc., but the timings are not included in any samples, and only one sample in one thread is ever viewed at a time).
So JMeter won't check the status of the "Submit" button, it acts on protocol level and will send the corresponding request in any case.
In regards to the File Upload bit itself. You can do it with HTTP Request sampler, just make sure:
You use POST (in some cases it can be PUT) method
Use multipart/form-data for POST box is checked
In Files Upload section the following values are provided:
File Path (either absolute or relative to JMeter's "bin" folder)
Parameter Name (form name which contains <input type="file" ... tag, you can figure that out from upload page source code)
File MIME Type
Actually the easiest way to build a file upload request is just recording it, see Recording File Uploads with JMeter guide for more details.
Steps to perform:
Add HTTP Request in TestPlan
Select the post/put method
Type in the PATH
Select use multipart/form-data
Under the File Upload tab, enter the file path, Parameter Name, and MimeType.
MIME Type examples: image/jpeg, image/png, text/plain
Save and run the test.
Screenshot below:
How to upload image using object function?
When I upload image with some form elements it gives internal error 500. If I remove file element from form then the data is saved with no error.
This has nothing to do with AngularJS. It is your server failing to be able to process the file in the Request. For example, most common cause is the folder the server tries to put the image in not accessible because of security settings in the web-server.
AngularJS is not raising a 500 error, it has to be Web Server raising that error
Check the logs that the your web-server may have.
Executing this code in Safari doesn't work, but it works in chrome and firefox:
var pathToFile = path.resolve('./scripts', file);
element( by.css('input[ng-file-select="onFileSelect($files)"]')).sendKeys(pathToFile);
In digging around it looks like it's not possible to interact with file inputs in this way in Protractor running on Safari. Does anyone know of a workaround in Safari to put a file path in an input?
This is due to a leaky abstraction, which requires a Safari specific solution:
I guess the workaround for those that really want to do file upload for SafariDriver would be not to do it natively via SafariDriver but by using external code libraries to perform the upload via HTTP/HTTPS (POST) requests (combining any other form data in addition to the file being uploaded/sent), then get response and check whether upload succeeded or not, then go back to SafariDriver code and navigate to next page to check upload succeeded or not, and/or to continue from there for the next steps in the automation.
This approach would be similar to the file download method using HTTP requests externally that has been mentioned in various posts in WebDriver and Selenium user Google groups. Here, it's just the inverse, doing upload instead of download.
Though if the upload requires a session (cookie), then you can extract Selenium session cookie and use with HTTP request. Or if session is stored with session ID in URL, extract that and pass along with HTTP request.
References
Selenium Issue 4220: The SafariDriver does not support file uploads
How to upload file using Selenium when the file input is hidden?
Access is denied error in IE while file uploading
Changing the value of input file
Chrome file upload bug: on change event won't be executed twice with the same file
Selenium IDE 1.4.1 throwing security error when uploading a local file
Dynamically submitting a file upload form in IE10 using jQuery