I am working on a React project like a social media app where users can upload images or videos. I am using Firebase storage to store the image and videos.
I can able to accomplish image uploading by using React react-firebase-file-uploader package but as I am new to web development, I am struggling to find the solution for uploading videos for React.
I have searched the internet but I couldn't find a proper solution to accomplish these tasks.
I required to upload only video/videos and want to preview it/them before uploading data to Firebase storage.
I need to compress the video to reduce the file size before uploading or after uploading to Firebase storage using cloud functions.
May be is worth stating again that video files are compressed by default. If something, you can resize the file so that it has less resolution, or process it to add a watermark.
Here is an answer that discribes how to resize a video file. And here is a tutorial on how to use moviepy on Cloud Functions.
You should have a look at this tutorial here and this gist there
You may be able to do some treatment with Cloud Functions after the upload but beware that memory and execution time are restricted and your script may fail on large files.
you can try this
<input type = "file"
onChange = {
(e) => {
let videoObj = e.currentTarget.files[0];
// console.log(videoObj)
let {
name,
size,
type
} = videoObj;
size = size / 1000000
//for not uploading the file more than 10 MB
if (size > 10) {
alert("please upload file less than 10 MB");
return;
}
//code for only uploading the video
type = type.split("/")[0];
if (type != "video") {
alert("please upload video only");
return;
}
}
}
/>
Related
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
I created a repository and then I uploaded audio files into it.
When I go to the audio files, for example: https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3
It goes to the github page, rather than playing the audio file directly.
My ultimate aim is to upload a few audio files so that a website using React can play the audio file
for instance I'd like to load
const audioTune = new Audio("https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3");
and play that file.
Thank you
I"m sure you already figured it out but append the url with "?raw=true" and it should run.
so like:
"https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3?raw=true"
Hi I am developing an ionic app using firebase as my database.
I read this question.
I understand it and have a more specific question.
I uploaded an image on amazon s3, imgur and filestack, and tried all three in firebase using data:url/<the url of image> and data:image/jpeg;<url of image>.
Am I typing something wrong into firebase?
The image does not come up. I do not want to write code in the app to upload the image etc, I just simply want an image to display on the app beside some data corresponding to an item in my firebase database.
I have read about base64, do I have to use it in this case?
(Optional) Perhaps If you could expand on the steps of doing this:
"You can use a filepicker to get the image file. Then you can host the image however you want, i prefer amazon s3. Once the image is hosted you can display the image using the url generated for the image."
I don't have much ionic experience, but why not just save the direct path to the image url and not include the data:url/ portion.
Simply store the url in firebase and then when it's retrieved inject it into your img src.
I uploaded 2 .mp4 videointo blobstore.
When I served 311.0KB mp4 video, there is no problem with it. I can play the video
But when I served 3.3MB mp4 video, video is not loaded. So I went to admin console, and click Blob Viewer menu. When I clicked to see 3.3MB video, it doesn't load as well. Why?
I am using free version of GAE.
After some time I found out that using the X-AppEngine-BlobKey and X-AppEngine-BlobRange is working fine. I use Django and here is part of the code that I use, it should give you the idea how it works
response = HttpResponse()
response['Accept-Ranges'] = 'bytes'
response['Content-Type'] = content_type
response['X-AppEngine-BlobKey'] = blob_key
if 'HTTP_RANGE' in request.META:
response['X-AppEngine-BlobRange'] = request.META['HTTP_RANGE']
return response
Please note that X-AppEngine-BlobRange is set to exactly the same value as range header in request. GAE documentation for that case might be a little bit confusing as the examples show values like "0-499" when it should be set to "bytes=0-499".
In my project I want to update the csv file in Google app. At the same time I want to show the progressbar to the end user how can i do this.
Please help me if you have total code.
I'am using Serlvet, JSP and Google app in my project.
index.jsp:
<form action="<%= blobstoreService.createUploadUrl("/upload") %>" method="post" enctype="multipart/form-data" onsubmit="return validate()">
<input type='file'>.....
upload:
Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);
BlobKey blobKey = blobs.get("myFile");
if (blobKey == null) {
res.sendRedirect("/");
} else {
res.sendRedirect("/serve?blob-key=" + blobKey.getKeyString());
}
I've had sucess in the past with this:
jQuery File Upload
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
As the data transfer mechanism is a standard POST you should also be able to intergrate this.