With the given file path, create a file object. new File(file_path) doesn't work. (WIN/MAC)
When tried creating a new file object using File constructor. There occurs an error.
new File(decodeURI(file_path))
when the above approach is followed File constructor err comes up.
File API needs a Blob here is work-arround
var GetFileBlobUsingURL = function (url, convertBlob) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.addEventListener('load', function() {
convertBlob(xhr.response);
});
xhr.send();
};
var blobToFile = function (blob, name) {
blob.lastModifiedDate = new Date();
blob.name = name;
return blob;
};
var GetFileObjectFromURL = function(filePathOrUrl, convertBlob) {
GetFileBlobUsingURL(filePathOrUrl, function (blob) {
convertBlob(blobToFile(blob, 'testFile.jpg'));
});
};
var FileURL="test/test.jpg"
GetFileObjectFromURL(FileURL, function (fileObject) {
console.log(fileObject);
});
Had the exact same issue today, so I'll provide an answer in TypeScript(3.7.5) based on what worked out for me.
Tips:
FileAPI needs a Blob to work with (as others have also stated), it won't work with a file path.
The function:
static async createFile(path: string, name: string, type: string): Promise<File> {
let response = await fetch(path);
let data = await response.blob();
let metadata = {
type: type
};
return new File([data], name, metadata);
}
The call:
await createFile('../assets/images/someInterestingPNGImage.png', 'iAmAFile.png', 'image/png')
.then((file) => {
//do something with ur file.
console.log(file);
});
Here is a simple alternative solution using axios:
const srcToFile = async (src, fileName) => {
const response = await axios.get(src, {
responseType: "blob",
});
const mimeType = response.headers["content-type"];
return new File([response.data], fileName, { type: mimeType });
};
Related
I have stacked so far with file uploading program on javascript. The code I have wrapped in if() and else statement.
if(filetype.name.match(/(.*?)\.(jpg|gif|doc|pdf|mp3|mp4|avi|txt|png|jpeg|tif)$/)) {
const formData = new FormData();
var encryptedfile;
const url = 'process.php';
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const file = document.querySelector('[type=file]').files[0];
var reader = new FileReader();
And after that, I have written reader.onload function. The code out of that function doesn't see what inside, because of local variables. But the problem not about that
reader.onload = function() {
var encrypted = CryptoJS.AES.encrypt(reader.result, "ThisIsPasswordForTheFile" );
encryptedfile = new File([encrypted], "foo.txt", {
type: "text/plain"
});
formData.append('files',encryptedfile);
}
reader.readAsDataURL(file);
The problem is const formData = new FormData() doesn't add this encrypted file
after I send it to the server, and it is successful, but no file the upload folder
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
console.log("ok");
// document.location.href = _url+"process.php";
});
});
}
And I am not really sure about CryptoJS.AES.encrypt code. is this code encrypt right file from document input? const file = document.querySelector('[type=file]').files[0];
Please take a look at my whole js code
document.querySelector("#inputGroupFile01").addEventListener("change", function(){
const reader = new FileReader();
var filetype =this.files[0]
if(filetype.name.match(/(.*?)\.(jpg|gif|doc|pdf|mp3|mp4|avi|txt|png|jpeg|tif)$/)) {
const formData = new FormData();
var encryptedfile;
const url = 'process.php';
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const file = document.querySelector('[type=file]').files[0];
var reader = new FileReader();
reader.onload = function() {
var encrypted = CryptoJS.AES.encrypt(reader.result, "ThisIsPasswordForTheFile" );
encryptedfile = new File([encrypted], "foo.txt", {
type: "text/plain"
});
formData.append('files',encryptedfile);
}
reader.readAsDataURL(file);
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
console.log("ok");
});
});
}
else{
alert("please choose another one!");
}
});
I want to upload file on firebase using JavaScript my file on my server and also have file path but firebase doesn't allow to upload file from file path and it shows the following error message:
code_: "storage/invalid-argument"
message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File."
name_: "FirebaseError"
serverResponse_: null
How can I upload the file or convert the file path to file object?
You can use this function to upload file in firebase. the uri is the file path which further creates the file type required in firebase.
const uploadImage = async (uri) => {
const uniqid = () => Math.random().toString(36).substr(2, 9);
const ext = uri.split('.').pop(); // Extract image extension
const filename = `${uniqid()}.${ext}`; // Generate unique name
const ref = fb.storage().ref().child(`images/${filename}`);
const response = await fetch(uri);
// const blob = await response.blob();
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', uri, true);
xhr.send(null);
});
const snapshot = await ref.put(blob);
blob.close();
const imgUrl = await snapshot.ref.getDownloadURL();
return imgUrl;
}
after this function you can call this function to upload your Image in firebase database like this,
const formSubmit= async(values, action)=>{
console.log(values);
try{
uploadImage(image) //this is my image upload code
.then( async(res) => {
setLoader(false);
var user = fb.auth().currentUser;
await user.updateProfile({
displayName: values.name,
photoURL: res // use the response url to store in mapped data table
}).then(function(res) {
console.log(res)
}).catch(function(error) {
console.log(error)
});
})
.catch(error => {
console.log('it does not work')
console.error(error)
})
}catch(error){
console.log(error)
}
}
On my NodeJS server I download an image that I need to embed in an email. My bucket is NOT public so just using the link will not work, as is not the solution I want for the requirements of either this question or the project.
I'm using a HTML email for this with something like:
<p>Embedded image: <img src="data:image/jpeg;charset=utf-8;base64,{{url}}" /></p>
So I download from S3
s3.getObject(
{ Bucket: "mybucket", Key: "mykey" },
function (error, data) {
if (error != null) {
console.log("Errror" + error)
} else {
console.log("Loaded " + data.ContentLength + " bytes")
and then I'm trying to convert data.body to UTF-8 base 64
I thought something like
"data:image/png;base64," + new String(encoder.encode(data.body), "UTF-8")
But it doesn't seem to work, and I'm struggling to define encoder to be able to do this.
Make sure you are getting image data in data.Body. I think data.Body already a buffer and you can construct src URL as bellow:
// Convert Body from a Buffer to a String
let base64String= data.Body.toString('base64');
let src = "data:image/jpeg;base64,"+base64String;
if you store s3 bucket object in binary format, to received it and convert it to base64 can be done:
const blobToBase64 = (blob) => {
const reader = new FileReader()
reader.readAsDataURL(blob)
return new Promise((rs, rj) => {
reader.onloadend = () => {
rs(reader.result)
}
reader.onerror = rj
})
}
function useImage({s3Link}) {
const [src, setSrc] = React.useState(null)
React.useEffect(() => {
async function query({link}) {
//link is link to s3 bucket URL link e.g
// const link = s3.getSignedUrl('getObject', {
// Bucket: bucketnamw,
// Key: key,
// Expires: 30,
// })
const r = await fetch(link)
const blob = await r.blob()
const base64 = await blobToBase64(blob)
console.log(`base64!`, base64)
setSrc(base64)
}
if (s3Link) {
query({link: s3Link})
}
}, [s3Link, setSrc])
return [{src}]
}
From a http request, a blob (b) (type application/octet-stream) is downloaded and then needs to be processed, it contains a json object.
I tried the following:
var reader = new FileReader();
reader.readAsText(b);
var readResult = <string> reader.result;
console.log(readResult);
var obj = JSON.parse(readResult);
It doesn´t work, and readResult is null.
How can you process a blob that contains a json into a json object?
When the request has responseType: 'blob' it returns binary, but if an error occurs message is returned as JSON inside Blob.
This is how you can decode JSON messages from blob:
(response) => {
return response;
},
async (error) => {
if (error.response.data instanceof Blob) {
const blob = new Blob([error.response.data]);
const data = await blob.text();
const { message, details } = JSON.parse(data);
//display message and details to the user
}
}
You will need an onload event like so:
var blob = new Blob([JSON.stringify({"test": "Hello from JSON!"})], {type : "application/json"}),
reader = new FileReader();
reader.onload = function() {
document.body.innerText = JSON.parse(this.result).test;
};
reader.readAsText(blob);
Code example :
try{
await this.exampleservice.MygetRequest().then(httpResponse => {
httpResponse.body.text().then(text => {
//console.log(text);
obj = JSON.parse(text);
//console.log('obj after parse:' ,obj);
let data = obj.result.data;
console.log('My data:' ,data);
});
});
}catch (error) {
if (error instanceof HttpErrorResponse) {
Swal({
type: 'error',
title: this.errorsService.getErrorMessage(error.status),
showConfirmButton: false,
timer: 1500
});
this.feedback_errors = error.error.errors;
this.feedback_errors_keys = this.feedback_errors ? Object.keys(this.feedback_errors) : null;
}
}
Uploading an image (from a dataUrl format) using an XHR request appears to fail on iOS (10.0.2+), other browsers are working: the latest Chrome (54.0.2840.71), Firefox (50.0).
The request seems to be constructed correctly in JS, but there is no actual data attached to the request.
var dataUrl = "data:image/jpeg;base64,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";
// create base64 encoded version of image
let parts = dataUrl.split(',');
let mime = parts[0].match(/:(.*?);/)[1];
let bstr = atob(parts[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new window.Blob([u8arr], {type: mime});
file = new window.File([blob], file.name);
// create formdata for uploading
let data = new FormData();
data.append('file', file, file.name);
// send the post request
var xhr = new XMLHttpRequest;
xhr.onload = function (oEvent) {
// Uploaded.
if ( oEvent.target.status == '200') {
console.log('upload with XHR success');
} else {
console.log('upload with XHR error');
}
};
xhr.open("POST", '/upload-endpoint', false);
xhr.send(data);
The main idea of how to upload an image to a RESTful api is using multipart/form-data.
If you use Swift 3.0, you can try these code below, using URLSession:
import Cocoa
fileprivate extension ImageUploader {
static let urlString = "/upload-endpoint"
static let boundary = "---------------------------14737809831460499985746342449"
static let contentType = "multipart/form-data; boundary=\(boundary)"
}
typealias CompletionBlock = (_ data: Data?, _ response: URLResponse?, _ error: Error?) -> Swift.Void
class ImageUploader {
func recognize(with paths: [String], completionBlock: #escaping CompletionBlock) {
guard paths.count > 0 else { return }
let path = paths.first!
guard let image = NSImage(contentsOfFile: paths.first!) else { return }
let imgRep: NSBitmapImageRep = image.representations.first as! NSBitmapImageRep
let data = imgRep.representation(using: .JPEG, properties: [:])
var request = URLRequest(url: URL(string: ImageUploader.urlString)!)
request.httpMethod = "POST"
request.timeoutInterval = 10
request.addValue(ImageUploader.contentType, forHTTPHeaderField: "Content-Type")
var postbody = Data()
postbody.append("\r\n--\(ImageUploader.boundary)\r\n".data(using: .utf8)!)
postbody.append("Content-Disposition: form-data; name=\"file\"; filename=\"file\"\r\n".data(using: .utf8)!)
postbody.append("Content-Type: application/octet-stream\r\n\r\n".data(using: .utf8)!)
postbody.append(data!)
postbody.append("\r\n--\(ImageUploader.boundary)\r\n".data(using: .utf8)!)
request.httpBody = postbody
let task = URLSession.shared.dataTask(with: request) { data, response, error in
completionBlock(data, response, error)
}
task.resume()
}
}
Maybe try using fetch instead of xhr?
let dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let {name} = file
// First convert base64 to blob
fetch(dataUrl)
.then(res => res.blob())
.then(blob => {
// Now upload the blob
let fd = new FormData()
fd.append('file', blob, name)
fetch('/upload-endpoint', {method: 'POST', body: fd})
.then(res => {
console.log('upload with fetch success:', res.ok)
})
})