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.
Related
I'm developing a single page app for image annotation. Each .jpg file is stored on S3/minIO services, coupled with a .xml file (Pascal VOC notation), which describes the coordinates and positions for each annotation associated to the image.
I'd like to fetch all the xml data, to be able filtering my image results within the webapp project (based upon ReactJS). But thousand of request to an S3 server directly from a web app seems a bit odd to me; nevertheless, I would prefer avoid using any "middleware" servers (like python/flask or nodejs), relying on the ReactJS app.
I've not been able to find any workaround to download all the xml files content with a single ajax call; do you have some idea to address this kind of issue?
The S3 API doesn't provide an API to fetch multiple files in a single operation. As you have suggested in your question, your application will need to handle this logic by first getting a list of the objects then iterating through that list.
Alternatively, if you can consider storing the xml files as a single archive.
One Gateway application is going to send a GET request to my Vert.x application. For this request, I need to read a large zip file from Amazon S3 server which I am able to read in BufferedInputStream. I don't want to download this file but rather I need to send this stream data to the gateway application (NOT a downloadable file with application/zip content type but stream data or byte chunks) which it will further send to end application where this stream data will be downloaded as a zip file. So the sending the zip file in form of stream to the gateway application I need to achieve using Vert.x. Already gone through lot of documentation and blogs but everywhere it is given to download the zip file which is not my intention. Could anyone please suggest how I could achieve this streaming of zip file in http response of calling request using Vert.x? Do I need to use Java NIO? If yes, could you please put details? Sorry, but I have nothing to put here as part of code. Thanks in advance!
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 have an AngularJS app that, upon requested to upload an image, creates a folder inside the file system (CentOS) and then puts that image there, telling the user everything went OK or not.
Is this possible? All I've found is ways to download the file.
Thanks.
It is better to delegate this task to a service on the server, since it is file that is uploading to a server. I put simple rest service to file upload this file to the server.
In my current project we are using lighttpd server. Here I am trying to upload the file. I am getting two Response Headers, first is with 301 Status code (Moved Permanently) and second is with 200 (OK).
But when I am checking in the folder I am not able to find any file (I mean no file uploaded).
I have tried both way to upload file as given links below:
http://jsfiddle.net/danialfarid/0mz6ff9o/135/
ngFileUpload
https://jsfiddle.net/JeJenny/ZG9re/
In both way I am getting the same response.
So here I have some sort of questions:
1) Is file upload is possible using AngularJS only? (No Server Side Script)
2) If possible, Is there any config problem with lighttpd?
Thanks !
Need Help...
The server side (or any web server) must be configured to handle POST and PUT requests. CGI, FastCGI, SCGI scripts can be written, or you can proxy to another backend. For simple file uploads, lighttpd also provides mod_webdav which you can configure (and protect with mod_auth) to allow you to upload files without having to write any server-side code.
https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModWebdav