blockBlobClient.uploadFile getting a [TypeError: Cannot read property 'size' of undefined]

Kaia Hansen 0 Reputation points
2024-02-06T15:07:57.0766667+00:00

I have a project that uses react native with expo. I have a screen in my app that works like a camera, allowing the user to take pictures and save them. Right now, Pictures are successfully saving to the users camera roll. I also want the pictures to be saved to my Azure Blob Storage. my TakePicture method:

const TakePicture = async () => {
    const photo = await camera.takePictureAsync();
    setPreviewVisible(true);
    setCapturedImage(photo);
    SavePhoto(photo.uri);
  };


My uploadToAzureBlobStorage and SavePhoto:

const uploadToAzureBlobStorage = async (localUri, filename) => {
    const credentials = new StorageSharedKeyCredential(accountName, accountKey);
    const blobServiceClient = new BlobServiceClient(
      `https://${accountName}.blob.core.windows.net`,
      credentials
    );

    const containerClient = blobServiceClient.getContainerClient(containerName);
    const blockBlobClient = containerClient.getBlockBlobClient(filename);

    try {
      // Fetch file size using expo-file-system
      const fileInfo = await FileSystem.getInfoAsync(localUri);
      const fileSize = fileInfo.size;

      if (!fileSize) {
        console.error("Unable to determine file size.");
        return false;
      }

      const options = {
        blockSize: 4,
        concurrency: 20,
        onProgress: (ev) => console.log(ev),
      };

      // Upload file to Azure Blob Storage
      await blockBlobClient.uploadFile(localUri, options);

      console.log(`File uploaded successfully. Size: ${fileSize} bytes`);
      return true;
    } catch (error) {
      console.error("Error uploading file to Azure Blob Storage:", error);
      return false;
    }
  };

  const SavePhoto = async () => {
    if (!capturedImage || !capturedImage.uri) {
      return;
    }
    const { uri } = capturedImage;

    const filename = uri.split("/").pop(); // Extract filename from the URI
    const localuri = `${FileSystem.documentDirectory}${filename}`;

    try {
      await FileSystem.moveAsync({
        from: uri,
        to: localuri,
      });

      // Upload to Azure Blob Storage
      await uploadToAzureBlobStorage(localuri, filename);

      const asset = await MediaLibrary.createAssetAsync(localuri);
      const album = await MediaLibrary.createAlbumAsync("DownLoads", asset);
      console.log("Photo saved successfully!");
    } catch (error) {
      console.error("Error saving photo:", error);
    }
  };

I'm getting an error with blockBlobClient.uploadFile(localUri, options). The error logs as: ERROR Error uploading file to Azure Blob Storage: [TypeError: Cannot read property 'size' of undefined] Thanks for the help.

Azure Blob Storage
Azure Blob Storage
An Azure service that stores unstructured data in the cloud as blobs.
3,199 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.