title: Upload and retrieve image using parse and back4app with nodejs and express
body: <p>Maybe this is an already answered question but I can't seem to find the right answer for me. I can't see what's wrong with my code.</p>
  
  <p>I have a form to upload the specifics of a vehicle such as route, price, a picture of the vehicle, etc. When I get the url of the image, it doesn't display anything
  <a href="https://i.stack.imgur.com/iyxz7.png" rel="nofollow noreferrer">example image</a></p>
  
  <p>Here's the code I use to post my form</p>
  
  <pre><code> //POST create vehicle
      app.post('/createVehicle', async function(req, res, next){
  
  
       const fileData = new Parse.File("VehiclePic", { base64: req.body.VehicleImg }, "image/png");
       console.log(fileData);
  
      let car = new Car();
  
      const Vehicle = {
          VehicleImg: fileData,
          Name: req.body.Name,
          description: req.body.description,
          Price: parseInt(req.body.Price),
          Route: req.body.Route,
          PassengerAmount: parseInt(req.body.PassengerAmount)
      }
  
  
      try{
          fileData.save().then(saved =&gt; {
  
              car.set('Image', saved);
              car.set('Name', Vehicle.Name);
              car.set('Description', Vehicle.description);
              car.set('Route', Vehicle.Route);
              car.set('Price', Vehicle.Price);
              car.set('PassengerAmount', Vehicle.PassengerAmount);
  
              console.log("URL vehiculo " + saved.url());
              car.save();
  
              console.log("El vehiculo ha sido creado con exito!");
          })     
  
      }catch(error){
          console.error('error ' , error);
      }
  
      res.redirect('/');
  
  });
  </code></pre>
  
  <p>The reason I don't use Vehicle.VehicleImg is because it returns me an undefined object.</p>
  
  <p>Here's the code to get all data</p>
  
  <pre><code>const Car = Parse.Object.extend('Vehicle');
  const query = new Parse.Query(Car);
  
  app.get('/', async function(req, res) {
  const VehicleInfo = [];
  
  query.notEqualTo("objectId", null);
  try {
      const result = await query.find();
      result.forEach(vehicle =&gt; {
          const vehiclePic = vehicle.get('Image');
          VehicleInfo.push({
              VehicleID: vehicle.id,
              VehicleImage: vehiclePic,
              VehicleName: vehicle.get('Name'),
              Description: vehicle.get('Description'),
              Price: vehicle.get('Price'),
              Rating: vehicle.get('Rating'),
              Route: vehicle.get('Route'),
              PassengerAmount: vehicle.get('PassengerAmount')
          });
  
      });
  
      res.render('index', {
          title: 'MainPage',
          VehicleData: VehicleInfo
  
      });
  } catch (error) {
      console.error('error fetching objects', error);
  }
  });
  </code></pre>
  
  <p>EDIT:this is the form, I'm using ejs.</p>
  
  <pre><code>&lt;div class="createVehicle-section container"&gt;
              &lt;br&gt;
  
              &lt;form method="POST" action="/createVehicle" enctype="multipart/form-data"&gt;
  
                  &lt;div id="img"&gt;
                      &lt;label for="VehicleImg"&gt;Seleccione la imagen:&lt;/label&gt;
                      &lt;input type="file" id="VehicleImg" name="VehicleImg" &gt;
                  &lt;/div&gt;
  
                  &lt;br&gt;
  
                  &lt;div class="col-lg-12 row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;label for="VehicleName"&gt;Nombre del vehiculo&lt;/label&gt;
                          &lt;input type="text" id="VehicleName" name="Name"&gt;
                          &lt;br&gt;
                          &lt;label for="DescriptionVe"&gt;Descripción&lt;/label&gt;
                          &lt;input type="text" id="Descriptionve" name="description"&gt;
                      &lt;/div&gt;          
  
                      &lt;div class="col-md-6"&gt;
                          &lt;label for="PriceVe"&gt;Precio&lt;/label&gt;
                          &lt;input type="number" id="PriceVe" name="Price" min="0" max="9999"&gt;
                          &lt;br&gt;
                          &lt;label for="RouteVe"&gt;Ruta&lt;/label&gt;
                          &lt;input type="text" id="RouteVe" name="Route"&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="col-md-6 container"&gt;
                      &lt;label for="PassegerAmountVe"&gt;Cantidad de Pasajeros Permitida&lt;/label&gt;
                      &lt;input type="number" id="PassengerAmountVe" name="PassengerAmount" min="0" max="9999"&gt;
                  &lt;/div&gt;
  
                  &lt;br&gt;
                  &lt;div class="text-center"&gt;
                      &lt;input class="btn btn-main btn-lg btn-shadow" type="submit" value="Guardar"/&gt;
  
                  &lt;/div&gt;
  
              &lt;/form&gt;
              &lt;br&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>EDIT: Here's my multer code to upload it to a localstorage, and I need to upload it to back4app.</p>
  
  <pre><code>//Multer Image Storage 
  const storage = multer.diskStorage({
      destination: './public/images/',
      filename: function(req, file, cb){ //cb = callback
           cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
      }
  });
  // Init Upload
  const upload = multer({
      storage: storage,
      limits:{fieldSize: 1000000},
      fileFilter: function(req, file, cb){
          checkFileType(file, cb);
      }
  }).single('VehicleImg');
  </code></pre>