Home > OS >  how to download an image from firebase storage then reupload it but with different name using JavaSc
how to download an image from firebase storage then reupload it but with different name using JavaSc

Time:09-11

// Create a reference with an initial file path and name
        const pathReference = sRef(st, 'RealTime_Recipes_Images/'   localStorage.getItem("rec_title_val")   '.png');

        var blob;

        getDownloadURL(pathReference)
        .then((url) => {

          console.log(url);

          // This can be downloaded directly:
          const xhr = new XMLHttpRequest();
          xhr.responseType = 'blob';
          xhr.onload = (event) => {
             blob = xhr.response;
          };
          xhr.open('GET', url);
          xhr.send();


        })
        .catch((error) => {
          // Handle any errors
        });
        



        // Create the file metadata
        const metadata = {
        contentType: 'image/png'
       };

       // Upload file and metadata
        const storageRef = sRef(
          st,
          "RealTime_Recipes_Images/"   recipe_title_input.value   ".png"
        );



           // 'file' comes from the Blob or File API
        uploadBytes(storageRef, blob, metadata).then((snapshot) => {
          console.log('Uploaded a blob or file!');
        });

debug console output:

    https://firebasestorage.googleapis.com/v0/b/my-chef-7e1e8.appspot.com/o/RealTime_Recipes_Images/title.png?alt=media&token=f4c8f00b-59d6-4f9f-ba3f-9a18e4086ebf
Uploaded a blob or file!

so the url returned successfully and the upload part works good because the new uploaded image appears on the storage but i think its an empty blob because XMLHttpRequest() did not work , so what i can do about it . Thank you in advance

storage image

CodePudding user response:

Firebase SDK now has a getBlob() function that you can use to download a file directly instead of getting an URL first. This also prevents users from sharing any URL with others.

import { storage } from '../path/to/firebase' // where firebase is initialized
import { getBlob, ref } from 'firebase/storage'

const storageRef = ref(storage, 'file/path.png')
const blob = await getBlob(storageRef)

const url = URL.createObjectURL(blob)
window.open(url)

CodePudding user response:

Try this :

getDownloadURL(pathReference).then((url) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
    var blob = e.currentTarget.response;
    var content = e.currentTarget.getResponseHeader('Content-Disposition');
    var fileName = content.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
    savefile(blob, fileName);
}
xhr.send();
})

and write a function with name savefile (outside the ) like this :

savefile(blob, fileName) {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    a.dispatchEvent(new MouseEvent('click'));
}

Hope this helps you!

  • Related