I want to upload file throw Monday.com API graphql

I want to upload file throw Monday.com API graphql. I am using dart and building Flutter App. I am stuck on uploading files (images) throw API. Can you help me, with providing codebase or anything.

Future<void> _pickImage(String imageType) async {
    html.FileUploadInputElement uploadInput = html.FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      final files = uploadInput.files;
      if (files!.isEmpty) return;

      final file = files.first;
      final reader = html.FileReader();

      reader.readAsDataUrl(file);
      reader.onLoadEnd.listen((e) {
        setState(() {
          _images[imageType] = reader.result as String?;
        });
      });
    });
  }


  Widget _buildImageField(String label, String imageType) {
    return Column(
      children: [
        Text(label),
        SizedBox(height: 10),
        _images[imageType] != null
            ? Image.network(_images[imageType]!)
            : Text('No image selected.'),
        ElevatedButton(
          onPressed: () => _pickImage(imageType),
          child: Text('Pick Image'),
        ),
      ],
    );
  }
  final ImagePicker _picker = ImagePicker();
  
  Map<String, String?> _images = {
    'TruckFront': null,
    'TruckLeft': null,
    'TruckRight': null,
    'TruckBack': null,
    'LeftFrontTire': null,
    'RightFrontTire': null,
    'SideLeftTires': null,
    'SideRightTires': null,
    'LeftRearOutside': null,
    'LeftRearInside': null,
    'RightRearOutside': null,
    'RightRearInside': null,
    'TrailerLeft': null,
    'TrailerRight': null,
  };

Hi Zarina,

Welcome to the community!

If you are looking for information regarding uploading files via the API, you can refer to our documentation on files here.

As well, I can link more documentation here regarding opening up a modal when uploading a file to a specific column.

Hope this helps with your request!

Best,
Joseph

Hello Joseph. thank you . I was working on building Flutter application, and about 2 weeks i am stuck how to send files via GraphQL. Could you help me if i provide with github repo? I am using packaga: photo_manager. and i am saving all imges as a AssetEntity and then converting to file, and then uploading via GraphQL mutation.

Hello there @zarina,

You can check an example on how to use the API to upload a file to a files column here.

This is the cURL for it:

curl --location 'https://api.monday.com/v2/file' \
--header 'Authorization: RELEVANT_API_KEY' \
--header 'API-version: 2023-10' \
--form 'query="mutation add_file($file: File!) {add_file_to_column (item_id: 1234567890, column_id:\"files\" file: $file) {id}}
"' \
--form 'map="{\"image\":\"variables.file\"}
"' \
--form 'image=@"/path/to/file"'

I hope that helps!

Cheers,
Matias

yeah, thanks i already managed to solve it and made a cool app using Flutter. Thank you

1 Like

Happy to hear that @zarina !!!