CSV creation - Unsupported Media Type error

Ask the community
, , , ,
1

I am trying to create a CSV from an array in Wix Studio, and upload it to my media, so I can have a user download it.

The array is correctly formatted. this is the code I am trying to use, following the direction in the API:

import { webMethod, Permissions } from 'wix-web-module';
import { mediaManager } from 'wix-media-backend';
import { fetch } from 'wix-fetch';

export const generateCsvFromContacts = webMethod(Permissions.Anyone, async (contactsArray) => {
    const headers = ["Mail Name", "Address Line 1", "Address Line 2", "Address Line 3", "Address Line 4", "Address Line 5", "Post Code", "Renewal"];
    let csvContent = headers.join(",") + "\n";

    contactsArray.forEach(contact => {
        let row = [contact.mailName, contact.addr1, contact.addr2, contact.addr3, contact.addr4, contact.addr5, contact.postCode, contact.note].join(",");
        csvContent += row + "\n";
    });

    console.log('CSV Content:', csvContent);


    // Get an upload URL
    // Define the path and options
    let path = "/CSVdownloads";
    let options = {
        "mediaOptions": {
            "mimeType": "text/csv",
            "mediaType": "document"
        },
        "metadataOptions": {
            "isPrivate": false,
            "isVisitorUpload": false,
            "fileName": "UKMailingList.csv"
        }
    }

    // Get an upload URL
    const uploadUrlInfo = await mediaManager.getUploadUrl(path, options);
    console.log('Upload URL Info:', uploadUrlInfo);


// Convert the CSV content to a Blob
let csvBlob = new Blob([csvContent], { type: 'text/csv' });

// Upload the CSV content to the Media Manager
const uploadResponse = await fetch(uploadUrlInfo.uploadUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/octet-stream'
    },
    body: csvContent // directly pass the CSV content
});

    // Check if the upload was successful
    console.log('uploadResponse Info:', uploadResponse);
    if (!uploadResponse.ok) {
        throw new Error('Upload failed');
    }

    // Get the file info from the upload response
    const fileInfo = await uploadResponse.json();
    console.log('File Info:', fileInfo);

    // Get a download URL
    const downloadUrl = await mediaManager.getDownloadUrl(fileInfo[0].file_name);
    console.log('Download URL:', downloadUrl);

    return downloadUrl;
})

The upload URL is being created successfully and is used correctly in the fetch function, but the fetch is failing with “Unsupported Media Type”, despite CSV being stated as supported in the API. I have tried this with Content-Type set to blob and I have tried uploading the array with no encoding at all but get the same error on all of them. Anyone know what I am missing here??

Simon.

2

I was having a similar issue with the UI while uploading a csv and what solved my issue was making sure my headers where double quoted, Ex:
“Name”,“State”,“ZipCode”,“mainHeader”

3

Figured this out for myself:

import { webMethod, Permissions } from 'wix-web-module';
import { mediaManager } from 'wix-media-backend';
//import { fetch } from 'wix-fetch';

export const generateCsvFromContacts = webMethod(Permissions.Anyone, async (contactsArray) => {
    const headers = ["Mailing Name", "Address Line 1", "Address Line 2", "Address Line 3", "Address Line 4", "Address Line 5", "Post Code", "Renewal"];
    let csvContent = headers.join(",") + "\n";

    contactsArray.forEach(contact => {
        let row = [contact.mailName, contact.addr1, contact.addr2, contact.addr3, contact.addr4, contact.addr5, contact.postCode, contact.note].join(",");
        csvContent += row + "\n";
    });

    console.log('CSV Content:', csvContent);
    const csvBuffer = Buffer.from(csvContent);

    let uploadResult = await uploadCSV(csvBuffer)
    console.log(uploadResult.fileUrl)
})


function uploadCSV(buffer) {
  return mediaManager.upload(
    "/CSVdownloads",
    buffer,
    "UKMailingList.csv",
    {
      "mediaOptions": {
        "mimeType": "text/csv",
        "mediaType": "document"
      },
      "metadataOptions": {
        "isPrivate": false,
        "isVisitorUpload": false
      }
    }
  );
}```