Stop browser blobs from expiring - javascript

want to create a react application that users upload images and instantly should be interacting with them. I'm not going to upload them into any server. I just want to use them in the user's browser.
For that currently use blobs. I save those blob URL'sin localstorage. But the thing is that after several minutes, those blob images got expired the URL can no longer access the image.
How can I extend blobs expiring time?

Related

Downloading image from API to a specific directory

I aim to create a program in ReactJS that works Offline. That is, the program will have the information stored locally and only when it is necessary to update, will be connected to the internet and download it using an API.
At this point, I chose to store the information coming from the API in LocalStorage.
componentDidMount(){
fetch('api.url')
.then(response => response.json())
.then(data => localStorage.setItem('fromAPI',JSON.stringify(data)))
}
My question is: the API in question will have photos, and it will be necessary to download these photos to store them locally. How can I store them locally?
What do you mean store them locally?
Your web app cannot access user's hard drive as it pleases. You can download resources with download prompt, or simply to user's set download folder, but to reuse them, you'd need the user to give you upload access to them (with input[type=file]). I guess this is not what you're looking for.
Alternatively, you can store files within localStorage, presumably base64-encoded. (Altho I think utf16 might work as well.) Just beware of localStorage's size limitation, around 5 - 10 MB depending on browser.
I did not understand if you want to save the image URL?
If you don't - you can save the base64 of the image,
read about how to convert the image to base64.
Here is a nice package you can use:
https://www.npmjs.com/package/image-to-base64

Firebase Storage download to computer

So I am trying to figure out how to download an array of images to a users computer. I have been storing everything through calling my server as I feel more secure using firebase on the server. So on click of a button on the client I can get a return of an array of the images in my firebase storage bucket.
Button click -> call server -> get a return of the array of urls from firebase
Now is there a way to download these to the users computer? Prompt them to choose a file path or download them directly?
I know I can do a single download auto by this:
var a = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body");
a[0].click();
a.remove();
I have tested a single url download that auto downloads on the button click, but I dont feel like I should have to loop through the array one at a time to download all nor do I know if this would work. I would assume it would since a single url works.
Is there a better way?
There is no way to download multiple files in one request from Firebase Storage. If you want to allow downloading of multiple files, you'll have to store them in a single (say zip) file and use the approach you already do today for downloading that file.
Alternatively you can use the Google Cloud Storage API to download a bunch of files. See this answer for more on that, but be aware the the Google Cloud Storage API is meant for use on an app server and not directly in your web page.

how can i load images from server and save into cache

I want to load images from server and want to save into cache.It means i want to load images from server one time and whenever i again want same image it should not be loaded through server for particular time. How can i do this into angular.The problem is related to image caching if one time image is loaded than it should be stored in the cache memory.
Example:- Suppose there are 4 user on portal and each user have their login i want to set cache storage time for each user how can i do this?

YouTube Data API v3 without leaking access token

I’m working on a web service where users can log in and upload videos to my YouTube channel. I’m OK with the risk of having unapproved content as long as I know who uploaded what. Moreover, I would like to avoid handling file uploads on my own servers.
I started with building a simple proof of concept on top of the YouTube Data API v3. Using OAuth, I obtained a refresh_token for my account. Every time user visits my service I make sure I have a valid access_token with upload permissions (I can generate one from a refresh_token). Because I don’t want to handle file uploads, I used code from https://github.com/youtube/api-samples/tree/master/javascript to build a JavaScript uploader. It needs an access_token to operate correctly, so JS gets one from the backend via an ajax call.
Now, the problem is that I can’t be sure who uploaded what. One of the users can take the token from his browser and initiate many video uploads out of my site (and my control). I won’t know who did that. I was thinking about generating a separate token for each user, but it seems that there is no way of knowing which access token was used to upload a specific video.
Is there a way to determine who uploaded what without handling file uploads on my end? Maybe something similar to AWS request signing, but for YT Data API? I went through the docs, but couldn’t find anything.
To put it in a different way: is there a way to hide access_token from the user, but still have a JavaScript based uploader that goes directly to YouTube?
Alternatively, I could send those files to S3 (where I can sign requests and know who uploaded what) and have a background job that would transfer those videos to youtube. This, however, is a slow and costly process.

Soundcloud: Is there a way to upload a file via HTML and JS?

Does anyone know if there's a way to upload a file that a user selects (typical HTML-based file input tag) without the current limitation in the SoundCloud API (which seems to be limited to recording local audio)?
I implemented something similar with Vimeo's API which goes something like this:
Get access token to avoid having to use OAuth or require a user to be a Soundcloud user to upload to my account.
Post a request to the API to get an upload token and URL.
Do an HTTP PUT against the upload URL with the file the user selected using HTML5's File API - Note this requires the user to accept the request via headers.
Check upload status (in Vimeo's case, you just re-PUT without data but with the ticket Id which is in the upload URL).
When done, make another API call to finish the process and trigger transcoding.
I'm essentially trying to enable user uploads of audio files and just send the file itself directly to Soundcloud an my account there rather than uploading to my servers and essentially doubling the work by uploading from my server to Soundcloud's.
I see that the SoundCloud JS Api supports PUTs for other tasks. I don't mind manually doing the XHR/Ajax calls directly (I'm using jQuery.ajax) but since the JS SDK hides the process a bit, I don't know how for sure how to approach it, if I can at all.
Anyone try this or happen to know how to make it happen?
This is not possible (for everyone).
In the section "Authenticating without the SoundCloud Connect Screen" on the following soundcloud API docs page:
https://developers.soundcloud.com/docs/api/guide#authentication
It says:
Our Terms of Service specify that you must use the Connect with
SoundCloud screen unless you have made a separate arrangement with us.
So unless you have a deal with soundcloud,
there's no way you can 'automatically' let a program upload sounds (or doing any modification to soundcloud whatsoever) without having to authenticate first.

Categories