How to upload a image with a description to back4app?

Question

so it‘s my first time using back4app and flutter. I did the tutorial https://www.back4app.com/docs/flutter/parse-sdk/flutter-save-file But now I want to add a description and I don’t know how to upload the picture with the description.

I already designed a textfield. And as I said the input of the textfield should be uploaded together with the picture to the storage file to back4app.

Every help is much appreciated!

I understand, but it's like I said, you upload a file, it will return the url of the image, then you save that information as type file in a table, then you can link any more information to it. a description, date, etc. are you using rest or lib to access back4app? – maybe I'll have time to make an example for you later, so I'll put it here. — Claudio Castro, Dec 17 '22 at 17:47

score 0 · Answer 1 · answered Dec 19 '22 at 21:27

Using the example of the page you linked to. And adapting to your needs, follow the commented example.

here is the link to the functional project: https://github.com/ccastroelo/back4appupload

class _SavePageState extends State<SavePage> {
  PickedFile? pickedFile;
  bool isLoading = false;
  TextEditingController? descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Upload Fie'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            SizedBox(height: 16),
            GestureDetector(
              child: pickedFile != null
                  ? Container(
                      width: 250,
                      height: 250,
                      decoration:
                          BoxDecoration(border: Border.all(color: Colors.blue)),
                      child: Image.file(File(pickedFile!.path)))
                  : Container(
                      width: 250,
                      height: 250,
                      decoration:
                          BoxDecoration(border: Border.all(color: Colors.blue)),
                      child: Center(
                        child: Text('Click here to pick image from Gallery'),
                      ),
                    ),
              onTap: () async {
                PickedFile? image =
                    await ImagePicker().getImage(source: ImageSource.gallery);

                if (image != null) {
                  setState(() {
                    pickedFile = image;
                  });
                }
              },
            ),
            SizedBox(height: 16),
            TextField(
              controller: descriptionController,
              decoration: InputDecoration(
                hintText: "description",
                filled: true,
                fillColor: Colors.lightBlueAccent,
              ),
            ),
            SizedBox(height: 16),
            Container(
                height: 50,
                child: ElevatedButton(
                  child: Text('Upload file'),
                  style: ElevatedButton.styleFrom(primary: Colors.blue),
                  onPressed: isLoading || pickedFile == null
                      ? null
                      : () async {
                          setState(() {
                            isLoading = true;
                          });
                          ParseFileBase? parseFile;

                          //Flutter Mobile/Desktop
                          parseFile = ParseFile(File(pickedFile!.path));

                          await parseFile.save();  // HERE YOU ARE SEND THE FILE TO BACK4APP AND A URL WILL SET IN parseFile.

                          final gallery = ParseObject('Gallery')
                            ..set('file', parseFile)
                            ..set('description', descriptionController?.text);
                          await gallery.save();  // HERE YOU ARE SEND THE DATA FROM parseFile TO A FILE FIELD IN GALLERY TABLE AND THE STRING FROM DESCRIPTION TO A STRING FIELD.    
                          setState(() {
                            isLoading = false;
                            pickedFile = null;
                          });

                          ScaffoldMessenger.of(context)
                            ..removeCurrentSnackBar()
                            ..showSnackBar(SnackBar(
                              content: Text(
                                'Save file with success on Back4app',
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                              duration: Duration(seconds: 3),
                              backgroundColor: Colors.blue,
                            ));
                        },
                ))
          ],
        ),
      ),
    );
  }
}

How to upload a image with a description to back4app?

1 Answers1