title: Sending an Image From Vue Js to Flask Restful API
body: <p>I am trying to upload a from on my VueJS client to my Flask Server. I am sending the image in a FormData which includes other form fields. I am able to access the other form fields. However, whatever that is send to my server does not seem to be able to be be saved in my flask app. If it helps the data is being sent to my api as a immutable multi-dictionary.
  <br><br>
  <strong>Vuejs</strong></p>
  <pre><code>&lt;template&gt;
  &lt;ValidationObserver v-slot=&quot;{ handleSubmit }&quot;&gt;
    &lt;b-form @submit.prevent=&quot;handleSubmit(onSubmit)&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;ValidationProvider rules=&quot;required&quot; v-slot=&quot;{ errors }&quot;&gt;
            &lt;b-form-group
              id=&quot;price-group&quot;
              label=&quot;Price:&quot;
              label-for=&quot;price-input&quot;
            &gt;
            &lt;b-form-input
                id=&quot;price-input&quot;
                v-model=&quot;productForm.price&quot;
                type=&quot;text&quot;
                required
                placeholder=&quot;Enter price of the product...&quot;
              &gt;&lt;/b-form-input&gt;
            &lt;/b-form-group&gt;
            &lt;span&gt;{{ errors[0] }}&lt;/span&gt;
          &lt;/ValidationProvider&gt;
          &lt;b-button-group&gt;
          &lt;b-button
              type=&quot;submit&quot; variant=&quot;primary&quot;&gt;Submit&lt;/b-button&gt;
          &lt;/b-button-group&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  
  export default {
  data() {
  return {
    productForm: {
      price: '',
      image_set: {
        coverphoto: null,
      },
      showMessage: false,
      notification: '',
    },
    coverphotoURl: '',
  };
  },
  methods: {
  createProduct(payload) {
    const path = 'http://127.0.0.1:5000/new_products';
  
    axios.post(path, payload)
      .then(() =&gt; {
        this.showMessage = true;
        this.notification = 'Registration Successful';
      })
      .catch(() =&gt; {
        this.showMessage = true;
        this.notification = payload;
      });
  },
  initForm() {
    this.productForm.price = '';
    this.productForm.image_set.coverphoto = null;
  },
  onSubmit() {
    const payload = new FormData();
    payload.append('price', this.productForm.price);
    payload.append('coverphoto', this.productForm.image_set.coverphoto, this.productForm.image_set.coverphoto.name);
  
    this.createProduct(payload);
  },
  onFileChange(e) {
    const file = e.target.files[0];
    this.productForm.image_set.coverphoto = file;
    this.coverphotoURl = URL.createObjectURL(file);
  },
  &lt;/script&gt;
  </code></pre>
  <p><br><br>
  <strong>Flask File</strong></p>
  <pre><code>@app.route('/new_products', methods=['POST'])
  def new_products():
      if request.method == 'POST':
          data = request.form
  
          if request.files:
              images = request.files.getlist('coverphoto')
          else:
              return jsonify({'message' : 'No File Uploaded'})
          
          print(images) # Print images will return [&lt;FileStorage: 'Coffee Roasters.jpg' ('image/jpeg')&gt;]
  
  
          newProduct = Products(str(uuid.uuid4()), data['name'], data['tasting_notes'], data['origination'], data['pairing'], data['price'])
  
          try:
              db.session.add(newProduct)
              db.session.commit()
  
              filename = secure_filename('coverphoto.jpg')
              img_path = os.path.join('/',app.config['UPLOAD_FOLDER'], filename)
              images.save(img_path)
              new_img = Images(str(uuid.uuid4()), img_path, newProduct.id)
          
              db.session.add(new_img)
              db.session.commit()
  
              return jsonify({'message' : 'Upload Successful'})
          
          except:
              return jsonify({'message' : 'Upload Unsuccessful'})
  </code></pre>
  <p>It how can i convert [&lt;FileStorage: 'Coffee Roasters.jpg' ('image/jpeg')&gt;] to something that flask is able to save? Thank you for yur help.</p>