I have been trying to upload PDF file from phone storage to Firebase. Its working fine when I use react-native-document-picker to select a pdf file, which returns the path of the file something like content://com.android.externalstorage.documents/document/primary%3Adocs%2F' +'<filename>'.pdf'
which is then passed to fetch
const response = await fetch(path);
blob = await response.blob();
and then the blob is uploaded to Firebase.
But the problem is that I don't want to pick a document every time. if I don't use react-native-document-picker and just curate the exact path return by the module. it gives network error when passed to fetch, so unable to create a blob.
I also tried react-native-fs but couldn't figure out how to create a blob of PDF residing in emulated storage.
Related
I have a scenario where the backend api(SPRING BOOT) is returning response as an excel file and i have to download it.
I have been trying to save the file using File saver library but could not reach the solution.
please help me on this
const blob = new Blob([response.data], {type:'application/vnd.openxmlformats-
officedocument.spreadsheetml.sheet'})
console.log(blob)
[![this is the response i am getting from api][1]][1]FileSaver.saveAs(blob, "tickets.xlsx")
I have a mobile app that wraps around the web-app, using webview.
The web-app has a button to open a large .zip file (e.g. 100 MB).
The user clicks a button, and selects a .zip file.
This triggers an onChange function with a variable of type File (Blob), which includes attributes like:
file name
file size
file type (application/zip)
The javascript code then parses the .zip file, extracts specific data within it and uses it within the web-app.
This works well within the web-app, when the app is called via the Chrome browser.
For example when operated in chrome browser on an Android phone, I can pull the .zip file and open it in the web-app.
I want to do the same but using the mobile app.
I am able to pick up the .zip file using a File Chooser, and pass it to Webview but I have problems to fetch the file from the Javascript code.
For reference, I am able to pass an image, by creating a data_uri using stringBuilder and passing the content (as data:image/jpeg;base64).
But the zip file is much larger.
When calling fetch(fileUri) from the Javascript side I'm getting errors.
I'm using the following uri
/storage/emulated/0/Android/data/com.example/files/Download/file2.zip
The fetch succeeds but returns a blob with size of 165 (i.e. not the actual size of the file) which hosts the error message:
{
"error": "Not Found",
"message": "The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again."
}
The program flow is like so:
I select a .zip file via FileChooser.
In onActivityResult, the uri value is /document/msf:12858 (seen via uri = intent.getData();)
The uri needs to be mapped into a real path file url, such that the fileUrl will be passed to webview.
Webview will then fetch the file using the fileUrl.
I searched how to get the real path file url when selecting a file with FileChooser, and found
this, and this links.
I wasn't able to get the real file path, so I decided to read the file and write it to another location, so I can get a file path. (this is not efficient and done just to check the functionality).
I create the new file using the following code:
InputStream stream = context.getContentResolver().openInputStream(uri);
File file2 = new File(context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS), "file2.zip");
writeBytesToFile(stream, file2);
I don't see any errors when creating the file, and when creating the file, the number of bytes that are read and written to the new file are as expected.
For file2, I get a value of:
/storage/emulated/0/Android/data/com.example/files/Download/file2.zip
Then, within the Javascript code I fetch this file path.
But I'm getting a Blob with the "file-not-found" content as above.
So:
How can I verify that the file is indeed created and that the path can be fetched from webview?
How can I get the real file path of the original selected file, so I don't have to read and write the original file to new location just to get the file path?
Thanks
I was able to get the file from external storage by doing the following steps:
create an initial uri (uri1)
The uri is created by:
creating a temporary file (file1) in the storage dir via
context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS)
I'm not sure why a temporary file need to be created but if I don't create a file I cannot get the uri.
createFile3
get the uri via
Uri uri1 = FileProvider.getUriForFile(context, "com.example.android.fileprovider", file1);
create an intent with the following attributes:
Intent.ACTION_OPEN_DOCUMENT
category: Intent.CATEGORY_OPENABLE
type: "application/zip"
extra attribute: fileIntent.putExtra(DocumentsContract.EXTRA_INITIAL_URI, uri1);
this opens a dialog box for selecting openable zip files in the Downloads directory,
after the file is selected, a new uri (uri2) is created that includes the name of the selected file.
extract the name of the file via
String fileName = getFileName(context, uri2);
create the dirPath by appending the filename
dirPath = "/data/user/0/com.example/" + fileName;
if the dirPath does not exist (first time), write the file to its dirPath location.
on successive ocassions dirPath exists, so there is no need to re-write the file.
open the file with regular Java means, e.g. via
ZipFile zip = new ZipFile(dirPath);
Im calling request from google workspace file with gapi using this code
gapi.client.drive.files.export({
fileId: fileId,
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
from that code i get response back of base64 string to convert as a blob but when i open file in google docs or msword file is corrupt and not working but if i change mimeType into application/pdf it working
same thing also happen in if i request file with application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
am i doing something wrong here or i there is other way to getting file workspace
md5Checksum is not available
As mentioned in the official documentation for files.get:
Response
By default, this responds with a Files resource in the response body. If you provide the URL parameter alt=media, then the response includes the file contents in the response body. Downloading content with alt=media only works if the file is stored in Drive. To download Google Docs, Sheets, and Slides use files.export instead. For further information on downloading files, refer to Download files.
Finally i found solution for this issue according to this official documentation we have two type we can download from google drive.
here my code how i request for file
const res = await drive
.files
.export({
fileId: fileId,
mimeType: yourMimeTarget
})
.then(res => res)
const blob_file = fetch(`data:${yourMimeTarget};base64,${btoa(res.body)}`)
.then(res => res.blob())
so after you fetch google workspace file you will get base64 string than you can convert it into blob
I am trying to upload a video to AWS S3 by using AWS Amplify in React native. I am able to upload an image when follow this link:
aws-amplify Upload image using PUT in Storage
I apply the same code to upload a video and success. However, the app crash if the video's size is big.
According to the example, they read and convert the image/video file to base64 (consume memory a lot and even cause the app crash) then upload everything on the server.
UPDATE
I found the answer using blob from this link
React native - Upload image to AWS S3 using blob
uploadImageVersion2 = async () => {
const response = await fetch("https://static.asiachan.com/Berry.Good.600.42297.jpg");
const blob = await response.blob();
const fileName = 'profileImage.jpg';
await Storage.put(fileName, blob, {
contentType: 'image/jpg',
level: 'private'
}).then(data => console.log(data))
.catch(err => console.log(err))
}
However, there is an error:
My questions are:
1/ Is there any way to avoid convert base64 before upload the image/video using AWS Amplify
2/ Is there any other ways to upload image/video in React native to AWS S3 without using Storage in AWS Amplify.
If you know the answer of these two questions, please let me know and show me how.
Thank you in advance!
We are developing an app that is to download files from HTTP URLs, the extensions/file types of which we will not know until runtime. We've been following this tutorial as a starting point, but since we aren't dealing with images, it hasn't helped us.
The issue is that the code in the tutorial will get you a Blob object and I can't find any code that will allow us to either:
Convert the Blob to a byte array.
Save the Blob straight to the file system.
The ultimate goal is to seamlessly save the file at the given URL to the file system and launch it with the default application, or to just launch it from the URL directly (without the save prompt you get if you just call Windows.System.Launcher.launchUriAsync(uri);).
Any insight anyone might have is greatly appreciated.
Regarding downloading content into byte array:
Using WinJS.xhr with the responseType option as 'arraybuffer' will return the contents in ArrayBuffer. A javascript typed array can be instantiated from the ArrayBuffer for example UInt8Array. This way contents can be read into byte array. code should look something like this:
// todo add other options reqd
var options = { url: url, responseType: 'arraybuffer' };
WinJS.xhr(options).then(function onxhr(ab)
{
var bytes = new Uint8Array(ab, 0, ab.byteLength);
}, function onerror()
{
// handle error
});
Once you take care of permissions to save the file to file system either by user explicitly picking the save file location using SaveFilePicker or pick folder using folder picker - file can be saved on local file system. Also, file can be saved to app data folder.
AFAIK, html/js/css files from local file system or the app data cannot be loaded for security reasons. Although DOM can be manipulated under constraints, to add content. I am not sure of your application requirements. You might need to consider alternatives instead of launching downloaded html files.