All geek questions in one place

Problems loading images using Express JS and Parse Cloud

I use Cloud Code and Express hosted on Parse to upload images.

Here is the Parse log error:

I2015-01-03T13:35:55.199Z] TypeError: Cannot read property 'thumbnail' of undefined at app.js:40:25 at callbacks (express_router.js:161:37) at param (express_router.js:135:11) at pass (express_router.js:142:5) at Router._dispatch (express_router.js:170:5) at Object.router (express_router.js:33:10) at next (connect_proto.js:240:15) at Object.expressInit [as handle] (express_middleware.js:31:5) at next (connect_proto.js:240:15) at Object.query [as handle] (connect_query.js:44:5)

Express JS / Parse seems to be unable to understand req.files.XXX. An error appears in app.js in the following line: console.error (req.files.thumbnail.size);

In addition, req.files prints the following error: No Message

Here is the recipecontent.ejs code:

 <!DOCTYPE html> <html> <form method="post" enctype="multipart/form-data" action="/saverecipecontent"> Enter Recipe Image 1: <input type="file" name="thumbnail" id="thumbnail"> <input type="submit"> </form> </html>

Here is the app.js code:

 // These two lines are required to initialize Express in Cloud Code. var express = require('express'); var app = express(); // Global app configuration section app.set('views', 'cloud/views'); // Specify the folder to find templates app.set('view engine', 'ejs'); // Set the template engine app.use(express.bodyParser()); // Middleware for reading request body app.get('/recipecontent', function(req, res) { res.render('recipecontent', { recipe_name: 'eg Rice Cake' }); }); app.post('/saverecipecontent', function(req, res) { console.error(req.files.thumbnail.size); console.error(req.files.thumbnail.path); console.error(req.files.thumbnail.name); console.error(req.files.thumbnail.type); Parse.Cloud.run('saveRecipeImage', req.body, { success: function(result) { // result is 'Hello world!' }, error: function(error) { } }); }); // Attach the Express app to Cloud Code. app.listen();

Finally, here is the main.js code:

  require('cloud/app.js'); Parse.Cloud.define("saveRecipeImage", function(request, response) { var recipeContent = Parse.Object.extend("recipe_content"); var recipeContentObj = new recipeContent(); console.error(request.params); var file = request.params.thumbnail; var name = "photo.jpg"; var parseFile = new Parse.File(name, file); parseFile.save().then(function(parseFile) { // The file has been saved to Parse. var url = parseFile.url(); recipeContentObj.set("recipe_imgurl1", url); return recipeContentObj.save(); }, function(error) { // The file either could not be read, or could not be saved to Parse. }); });

Please, help!

+5
source share
2 answers

I raised this bug in Parse, here is the update:

The middleware that we support for express.js does not support file downloads.

Instead, you send the contents of the file as base64 to your endpoint and create a Parse.File object from this data.

Here is the updated code using the contents of the file as base64 for the endpoint and creating the Parse.File object:

Here is the layout.ejs code

 < html > < head > < script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" > < /script> <script src="/ / cdnjs.cloudflare.com / ajax / libs / underscore.js / 1.4.4 / underscore - min.js "></script> <!-- <% if (locals.title) { %> --> <!-- <title><%= title %></title> <% } else { %> <title>AnyImg</title> <% } %> --> <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <script src=" / javascripts / backbone.js "></script> <script src=" https: //www.parsecdn.com/js/parse-1.2.8.min.js"></script> < script > Parse.initialize("n47hKoBkN2vbAAjIPd8rj6Dnc9P6zKYIlXvlZo3x", "a960Z8aOzTNOaKMUcvDQ7lvzT2v2VTHABh6lAdNx"); < /script> <script type="text/javascript " src=" / javascripts / main.js "></script> </head> <body> <div id=" content "> <div id=" bar "> <h1>File Upload</h1> </div> <div id=" main "> <form id=" upload "> <div class=" outer "> <div> <input type=" text " name=" title " placeholder=" Untitled " /> <input id=" asd " type=" file " /> </div> </div> </form> <img id=" img " src=" " /> <div id=" base "></div> </div> </div> </body> </html> 

 // These two lines are required to initialize Express in Cloud Code. var express = require('express'); var app = express(); // Global app configuration section app.set('views', 'cloud/views'); // Specify the folder to find templates app.set('view engine', 'ejs'); // Set the template engine app.use(express.json()); app.use(express.urlencoded()); app.get('/', function(req, res) { res.render('layout', { recipe_name: 'eg Rice Cake' }); }); app.post('/newUploadImage', function(req, res) { var file = new Parse.File("logo.png", { base64: req.body.image }); file.save().then(function() { console.log("file saved"); console.log(file.url()); }); if (req.params.image) { console.log("data found12345"); } }); app.listen();

Here is the js image

 var base64Data; var imageName = ''; function readImage(input) { if (input.files && input.files[0]) { imageName = input.files[0].name; var FR = new FileReader(); FR.onload = function(e) { $('#img').attr("src", e.target.result); $('#base').text(e.target.result); base64Data = e.target.result; var datObj = { image: e.target.result, name: imageName }; var test = { image: '12sds' }; $.ajax({ type: "POST", data: datObj, url: '/newUploadImage', dataType: "json", success: function(msg) { alert(msg.url); console.log(); }, error: function(errormsg) { console.log(errormsg); alert("Sorry, there was an error uploading the image."); } }); }; FR.readAsDataURL(input.files[0]); } } $(function() { // Make all of special links magically post the form // when it has a particular data-action associated $("#asd").change(function() { readImage(this); alert('Test'); }); });

Thanks!

+2
source

It looks like you're trying to use the body-parser middleware to parse a multi-part body, but as indicated on the github body-parser page itself:

It does not process multi-part bodies because of their complex and usually large character.

You need one more parser to handle multi-part bodies. I suggest you multer , but there are many others available.

+1
source

Source: https://habr.com/ru/post/1210252/

More articles:


All Articles