Skip to main content

I want to upload file throw Monday.com API graphql

  • December 12, 2023
  • 5 replies
  • 314 views

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,
  };

5 replies

Forum|alt.badge.img
  • monday.com Team Member
  • December 13, 2023

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


  • Author
  • New Participant
  • December 20, 2023

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.


Matias.Monday
Forum|alt.badge.img
  • monday.com Team Member
  • December 27, 2023

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


  • Author
  • New Participant
  • December 27, 2023

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


Matias.Monday
Forum|alt.badge.img
  • monday.com Team Member
  • December 28, 2023

Happy to hear that @zarina !!!