File Upload to IPFS issue

[quote="Waqar-7, post:20, topic:21450"]
can you share the cloud function code of upload Folder
[/quote]

Parse.Cloud.define("getArtwork", async (params) => {

    const query = new Parse.Query("Artwork");

    const queryResults = await query.find();

    const results = [];

 

    for (let i = 0; i < queryResults.length; ++i) {

      results.push({

        "cover": queryResults[i].attributes.cover,

        "path": queryResults[i].attributes.path,

        "tokenId": queryResults[i].attributes.nftId,

        "tokenAddress": queryResults[i].attributes.tokenAddress,

        "name": queryResults[i].attributes.name,

        "description": queryResults[i].attributes.description,

        "additionalInfo": queryResults[i].attributes.additionalInfo,

        "unlockableContent": queryResults[i].attributes.unlockableContent,

        "creator": queryResults[i].attributes.creator,

        "fileType": queryResults[i].attributes.fileType,

        "royalty": queryResults[i].attributes.royalty,

        "active": queryResults[i].attributes.active,

        "likes": queryResults[i].attributes.likes,

        "currentOwner": queryResults[i].attributes.currentOwner,

        "likers": queryResults[i].attributes.likers,

        "encouragements": queryResults[i].attributes.encouragements,

        "encouragers": queryResults[i].attributes.encouragers

      });

    }

    return results;

  });

this is the uploadFolder web3api function:

async function readURL(input) {
  if (input.files && input.files[0]) {
    let reader = new FileReader();

    let fileType = input.files[0].type;
    let fileSize = input.files[0].size;

    if(fileSize > 64000000){
      $('#fileSizeModalBody').html('File size cannot exceed 64 MB.');
      $('#fileSizeModal').modal('show');
      $('#createButton').prop('disabled', true);
      $('#nftSizeExceededText').html('File too large, please utilize unlockable content');
      nft = '';
      console.log("Y2121YYYYTT1", nft);

    }

    reader.onload = function (file) {
      if(fileType == 'image/png' || fileType == 'image/jpeg' || fileType == 'image/gif' || fileType == 'image/webp'){
        $('#nftImgEx').attr('src', file.target.result);
        if(input.files[0].size <= 3000000){
          $('#formToUploadCover').css('display', 'none');
          cover = new Moralis.File(input.files[0].name, input.files[0]);
          console.log("YYYYYTT1", cover);
        } else{
          $('#nftCoverEx').prop('required');
        }
      } else if (fileType == "video/mp4" || fileType == "video/webm") {
        $('#nftImgEx').css('display', 'none');
        $('#nftVidEx').css('display', 'inline-block');
        $('#nftVidEx').attr('src', file.target.result);
        $('#nftCoverEx').prop('required');
      } else if (fileType == "audio/mp3" || fileType == "audio/webm" || fileType == "audio/mpeg"){
        $('#nftImgEx').css('display', 'none');
        $('#nftAudEx').css('display', 'inline-block');
        $('#nftAudEx').attr('src', file.target.result);
        $('#nftCoverEx').prop('required');
      }
    };

    reader.readAsDataURL(input.files[0]);

    const file = input.files[0];

    const fileName = input.files[0].name;

    let extension = fileName.split('.').pop();

    const cleanedFileName = 'nft.' + extension;

    console.log(cleanedFileName);

    nft = new Moralis.File(cleanedFileName, file);
    console.log('NFT To MINT: ', nft);
    console.log("YYY515151YYTT1", nft);

  }
};


$("#nftImgFile").change(function(){
  readURL(this);
  $('.upload-button-div').css('display', 'none');
  $('#imageFileLabel').css('display', 'none');

  $('#clearFile').css('display', 'block');

  $('#formToUploadCover').css('display', 'block');
});

$('#closeIcon1').click(()=>{
  location.reload();
});

$('#closeIcon2').click(()=>{
  location.reload();
});

function coverURL(input) {
  if(input.files && input.files[0]) {
    let reader = new FileReader();

    let fileType = input.files[0].type;
    let fileSize = input.files[0].size;

    reader.onload = function (file) {
      if(fileType == 'image/png' || fileType == 'image/jpeg' || fileType == 'image/gif' || fileType == 'image/webp'){
        $('#nftCoverEx').attr('src', file.target.result);
        if(fileSize > 3000000){
          $('#fileSizeModalBody').html('File size cannot exceed 3 MB.');
          $('#fileSizeModal').modal('show');
          $('#createButton').prop('disabled', true);
          $('#fileSizeExceededText').html('File too large, please use smaller file');
          cover = '';
          console.log("YYYYYfdddgdgTT1", cover);

        }
      } else{
        $('#nftCoverEx').html('Incorrect File Format');
      }
    };

    reader.readAsDataURL(input.files[0]);

    const coverFile = input.files[0];

    const coverfileName = input.files[0].name;

    let coverExtension = coverfileName.split('.').pop();

    const cleanedCoverFileName = 'cover.' + coverExtension;

    cover = new Moralis.File(cleanedCoverFileName, coverFile);
    console.log(cover);
  }
};

this is an example of cloud function that you could adapt and use:

Parse.Cloud.define("uploadToIPFS", async (request) => {
# you have to get the base64 data from request params
console.log(request.params)

const abi = [
    {
    path: "moralis/logo.jpg",
    content: "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3",
    },
];

const response = await Moralis.EvmApi.ipfs.uploadFolder({
    abi
});
console.log(response);
});

this is not a working function, only as an idea so that you can understand how it could be implemented

let arrayToUpload=[];

async function uploadArtToIPFS() {

  try {

    await nft.saveIPFS();

    console.log("nft");

   

    console.log(nft);

    let nftPath = nft._url;

    console.log("nft path");

    console.log(nftPath);

    uploadMetaDataToIPFS(nftPath);

  } catch (err) {

    console.log(err);

    alert("Error saving art to ipfs");

    $('#saveToIPFSBtn').prop('disabled', false);

    $('#saveToIPFSBtn').html("Upload and Mint");

  }

};

async function uploadMetaDataToIPFS(nftPath) {

  $('#saveToIPFSBtn').html(`Uploading metadata to IPFS <div class="spinner-border spinner-border-sm text-light" role="status">

                              <span class="sr-only">Loading...</span>

                            </div>`);

  try {

    let allEmojiRegEx = /\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]/g;

     

console.log(nftPath);

console.log("nftPath");

console.log(nftPath);

    const nftMetadata =arrayToUpload.push({

      path:nftPath,

      content : {

        name: $('#title').val().replace(allEmojiRegEx, ''),

        description: $('#descriptionInput').val().replace(allEmojiRegEx, ''),

        image:'//ipfs.moralis.io:2053/ipfs/QmeQ65qquD7T4BPmGftPvnZ4Dbix72MZjtXeVJgLxT1xU2/nftPath',

      }

    })

    const nftMetadataPath = await Moralis.Web3API.storage.uploadFolder(nftMetadata);

    console.log(nftMetadataPath);

   

    mint(nftMetadataPath, nftPath);

  } catch (err) {

    console.log(err);

    alert("Error saving metadata to ipfs");

    $('#saveToIPFSBtn').prop('disabled', false);

    $('#saveToIPFSBtn').html("Upload and Mint");

  }

};

axios.post('https://deep-index.moralis.io/api/v2/ipfs/uploadFolder',

            arrayToUpload,

            {

                headers: {

                    'X-API-KEY': '',

                    'Content-Type': 'application/json',

                    accept: 'application/json'

                },

                maxBodyLength: Infinity

            }

)

AFTERE UPDATING THE CODE FOR FOLDER AND WEB3API GETTING THIS ERROR

I think that the content has to be in base64 format

provide some guide about the base64 format

you can try something similar as here for base64 conversion

after changing to base64 getting this error

at what line you got that error?

after uploading this path in the smart contract i am geeting error

https://ipfs.moralis.io:2053/ipfs/QmWGLLUzgpF3UAripAHy51B2KGt2S6ChiwcySN1vNuHwH3/http://localhost:1337/server/files/002/8ba14d1de12ac31d3097da506fec567f_nft.JPG

that path seems like it has localhost in the middle, is that intended?

getting the image from this path

how was this path created? it doesn’t look like a normal IPFS path to me

this path is created using the parse server and the image is saved in mongodb when i am directly adding this path it’s working and showing the nft but after saving to ipfs getting issue

you have to save the file content to ipfs, not the path to a file from parse server

mean .json file ok I am working