Downloading From Amazon S3 Bucket with a file name - reactjs

I am trying to download a file from amazon s3 but with a different name. i.e. not the name of the stored file which has timestamps attached_to_it.
But If I download it from s3.getObject
s3.getObject({
Key: fileKey,
Bucket: `/${albumBucketName}`,
//ResponseContentDisposition: `attachment; filename="${fileKey}"`,
//ResponseContentType: "audio/wav"
}, function (
err,
data
) {
....
});
it will not let the download being handled by browser. so, I will not get download progress in general. I dont want to handle the download progress in my app. I want it to download from browser.
I didn't go with URL approach because it won't let me specify a name for the file being downloaded.
EDIT:
there is a solution for this, which is giving anchor tags download attribute specifying the file name in it. but it wont work in ios safari. but still I dont want to loose accessibility of the feature for some user.

This part is on the right track:
ResponseContentDisposition: `attachment; filename="${desired_filename_here}"`,
...but instead of s3.getObject(), you need s3.getSignedUrl(). This generates a URL that contains embedded credentials, in a format that allows access to this one object but does not make the credentials reusable for any other purpose. Pass this URL to the browser and the file will be downloaded with the desired name.
You can use ResponseContentDisposition with s3.getSignedUrl().

Related

Convert video file to byte array and save within app

I am trying save some video in react native app privately. So that i can download videos within app and can watch within app after download. So i am not able to get it how can i do this. Let me know if anybody have resolution for this approach. i was checking that we can convert files into byte than can store within react native app. again then convert into video and can watch it within app. Let me know if this can be done by anyone. Thanks
<Video source={{uri: "background"}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onError={this.videoError}
style={styles.backgroundVideo} />
Watch this video
You can watch the above video. Anybody have a idea that how mx doing this thing. I want to do same. Download videos and save and will be private and play in my app.
For downloading any file like video,img ..
there are two best known libraries for downloading files
https://www.npmjs.com/package/react-native-fs
https://www.npmjs.com/package/react-native-fetch-blob
Now you can follow their documentation to download files like Videos,images or whatever you want to your user's phone.
For the part that you dont want it to be available to user via gallery.
For this you can use react-native-fetchblob as it has builtin intent actions and views. You can download a video file with any random name like 1234CACHE any random name without any extension to it, specially dont give it extension like video.mp4 because gallery detects .mp4 files so dont give it any extension and the file won't be available in any gallery.
Now how to hide the file? react-native-fetch-blob allow us to save files into directories that are not publicly available i mean user cannot reach those directory and these directories are used only for saving App's data so you can save your video file in one of these directories.
Now after completing your download, You can open your file with the Intent.
Example:
const VIDEO_PATH = res.path() //the path where your downloaded video is saved, you will actually receive this in the response of download function.
const MIME_TYPE = "video/mp4"
//Now finally call the intent with video mime so the video will be opened in user's media player, or if you want your own media player you can use any library for that.
android.actionViewIntent(VIDEO_PATH , MIME_TYPE)
you can use https://github.com/RonRadtke/react-native-blob-util to download any remote files

dart: How to save a file?

I need to save the file that is on my hard drive.
File address: /home/mk/proj1/1.txt
Program address: /home/mk/proj2/
I try to save:
new dom.AnchorElement(href: '/home/mk/proj1/1.txt')
..setAttribute("download", '1.txt')
..click();
Displays information about saving, but writes: Failed! No file.
How to save a file?
There is not really a way to save a file in the browser (except perhaps limited support for temporary files)
You can search for JavaScript solutions. They will be quite similar for Dart in the browser.
For example JavaScript: Create and save file
If you want to store a file on the client machine, you can provide a download link.
See also How to force a Download File prompt instead of displaying it in-browser with HTML?
To provide a download link for data that is available in the browser clients code instead of a server file, you can use a data url.
See also https://stackoverflow.com/a/29691487/217408

How to load local image choosen by user in React 360

Im using React-360 to display a 360 photo. It works fine when we give remote url as src in Environment.setBackgroundImage(src, {format: format});
But i have a requirement to allow user to select a local 360 photo file and preview it.
Using Input tag and javascript i'm getting the file choose by user; but i'm not able to pass that file as src.
i tried this too.. didn't work.
src = URL.createObjectURL(file);
Environment.setBackgroundImage(src, {format: format});
Is it not possible to load local file in react 360.
Same Problem in google vr view also. Anything i can do to load local file choose by user.
have you tried using the asset method like so?
Environment.setBackgroundImage(asset('your_image.jpg'));
I think this could be what you are looking for.

How to show Image from local drive in Angular JS [duplicate]

I'm trying to retrieve a picture from my file system after a good storage,(instead of putting it in the database I copy it to the disc and i put the path to the db)
I had store the picture to c:\images\ folder and supposing that the name the complete path is c:\images\mypic.jpg
when I try to retrieve it a set the img src attribute to <img src="c:\images\mypic.jps"> by using some java code
in the browser console I found this error Not allowed to load local resource: file:///C://images//mypic.jpg
Question: how to fix these path problem ? where Should I store the pictures ? and from where should I retrieve them ?
sending tag <img src="c:\images\mypic.jpg"> would cause user browser to access image from his filesystem.
if you have to store images in folder located in c:\images i would suggest to create an servlet like images.jsp, that as a parameter takes name of a file, then sets servlet response content to an image/jpg and then loads bytes of image from server location and put it to a response.
But what you use to create your application? is it pure servlet? Spring? JSF?
Here you can find some info about, how to do it.
In Chrome, you are supposed to be able to allow this capability with a runtime flag --allow-file-access-from-files
However, it looks like there is a problem with current versions of Chrome (37, 38) where this doesn't work unless you also pass the runtime flag --disable-web-security
That's an unacceptable solution, except perhaps as a short-term workaround, but it has been identified as an issue:
https://code.google.com/p/chromium/issues/detail?id=379206
You have Two alternatives :
First one is to create a ServletImageLoader that would take as a parameter an identifier of your image (the path of the image or a hash) that you will use inside the Servlet to handle your image, and it will print to the response stream the loaded image from the server.
Second one is to create a folder inside your application's ROOT folder and just save the relative path to your images.
Many browsers have changed their security policies to no longer allow reading data directly from file shares or even local resources. You need to either place the files somewhere that your tomcat instance can serve them up and put a "regular" http url in the html you generate. This can be accomplished by either providing a servlet which reads and provides the file putting the file into a directory where tomcat will serve it up as "static" content.
The concept of http location and disk location is different. What you need to do is:
for uploaded file summer.jpg
move that under a known (to the application) location to disk, e.g c:\images\summer.jpg
insert into db record representing the image with text summer.jpg
to display it use plain <img src="images/summer.jpg" />
you need something (e.g apache) that will serve c:\images\ under your application's /images. If you cannot do this then in step #2 you need to save somewhere under your web root, e.g c:\my-applications\demo-app\build\images
This error means you can not directly load data from file system because there are security issues behind this. The only solution that I know is create a web service to serve load files.
Here is a simple expressjs solution if you just want to run this app locally and security is not a concern:
On your server.js or app.js file, add the following:
app.use('/local-files', express.static('/'));
That will serve your ENTIRE root directory under /local-files. Needless to say this is a really bad idea if you're planning to deploy this app anywhere other than your local machine.
Now, you can simply do:
<img src="/local-files/images/mypic.jps"/>
note: I'm running macOS. If you're using Windows you may have to search and remove 'C:\' from the path string
Do not use ABSOLUTE PATH to refer to the name of the image for example: C:/xamp/www/Archivos/images/templatemo_image_02_opt_20160401-1244.jpg. You must use the reference to its location within webserver. For example using ../../Archivos/images/templatemo_image_02_opt_20160401-1244.jpg depending on where your process is running.

How do you link to a file such that it will download rather than render in browser?

I want people to be able to click my link and download my file. But when I link to the file download on my site, it just brings them to the code for the file. I am trying to upload a .cpp file (c plus plus). It's in my downloads folder but when I link to there it displays the .cpp file rather than download it.
Any help is appreciated.
You can set the Content-Disposition header to "attachment" in your HTTP response. If you let me know what server platform, I'll try to give more detail.
You will have to write some code to set the HTTP response header ContentType to "application/x-force-download". This tells the browser what you really want is a file download, instead of the default action (file open). You will also need to set the ContentLength header. This allows the browser to display a progress bar.
If you use ASP.NET, there are some commercial product for this purpose:
http://www.essentialobjects.com/Products/EOWeb/Downloader.aspx
It basically does what stated above with a few extra features.
That's because the browser knows how to read the file - you could ask users on the page to right click on the link and click "Save Target As" rather than just having a link.

Resources