Images not uploading to mongodb atlas

Hello all,

I have a simple app, the image have not been uploading in mongodb atlas.
This is my code:

Thanks

you need to call await parseFile.save()

It still didn’t work :

View the code here : Edit fiddle - JSFiddle - Code Playground

Thanks for the help.

You are mixing app async/await with promise then, which makes your code confusing. Your parseFile.save() function is probably throwing some error, console logs inside the then() function are not printing out. Try to catch and print out the error. It might give you some clue.

Thanks once again for the reply, am actual still learning the rope.
Now i see an error actually :

Thanks.

Would you mind to coy-paste the code?

Thanks so much for the reply. This is the code.

Javascript

Parse.initialize("myAppId");
Parse.serverURL = "https://parse-from-real-source.herokuapp.com/parse";

var TestObject = Parse.Object.extend("TestObject");


$(document).ready(function handleFile() {
  console.log("JQuery Loaded");
	
	$("#buttonEl").on("click", async function() {
	  console.log("Button Clicked");
		
		//Get file data
		var fileUploadControl = $("#inputEl")[0];
		
		if (fileUploadControl.files.length > 0) {
		  var file = fileUploadControl.files[0];
			var name = file.name;
			console.log("Name of Uploaded file is: " + name);
			
			 var parseFile = new Parse.File(name, file);
		 	 console.log("File URL is: " + parseFile.url()); 
			
			
			await parseFile.save().then(function() {
			console.log("Hello there");
			$("#imageEl").attr("src", parseFile.url()); 
			
			var testObj =  new TestObject();
			testObj.set("image", parseFile);
			testObj.save().then(function() {
			  console.log(testObj.id);
			});
			},function err(err) {
			console.error(err);
		});
			
		};
		

		
	});
});

Html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://npmcdn.com/parse/dist/parse.js"></script>
</head>
<body>
  <h1> Upload Image</h1>
	<img id="imageEl" src="" alt="" />
	<input type="file" id="inputEl" /><br /><br />
	<button id="buttonEl">Load</button>
</body>
</html>

Thanks alot.

Would you mind to console.log(parseFile.url()) right before $("#imageEl").attr("src", parseFile.url()); ?

Done. Still the same error.

Parse.initialize("myAppId");
Parse.serverURL = "https://parse-from-real-source.herokuapp.com/parse";

var TestObject = Parse.Object.extend("TestObject");


$(document).ready(function handleFile() {
  console.log("JQuery Loaded");
	
	$("#buttonEl").on("click", async function() {
	  console.log("Button Clicked");
		
		//Get file data
		var fileUploadControl = $("#inputEl")[0];
		
		if (fileUploadControl.files.length > 0) {
		  var file = fileUploadControl.files[0];
			var name = file.name;
			console.log("Name of Uploaded file is: " + name);
			
			 var parseFile = new Parse.File(name, file);
		 	 console.log("File URL is: " + parseFile.url()); 
			
			
			await parseFile.save().then(function() {
			/* console.log("Hello there"); */
			console.log(parseFile.url());
			$("#imageEl").attr("src", parseFile.url()); 
			
			var testObj =  new TestObject();
			testObj.set("image", parseFile);
			testObj.save().then(function() {
			  console.log(testObj.id);
			});
			},function err(err) {
			console.error(err);
		});
			
		};
		

		
	});
});

What’s the output that you have in your console?

Thanks again for the prompt response.

This is my Console:

Thanks.

Now you see the error, right?

“file upload by public is disabled”

You have to either first login or you need to enable fileUpload.enableForPublic in your Parse Server settings.

Thanks so much.
I have some more errors on the console after adding fileUpload.enableForPublic = true; :

Screen 2:

image

It looks your Parse Server is not running properly. Are the other queries working?

Yes, the other queries are working:

Thanks alot

Hi please how did you add fileUpload.enableForPublic = true; to your index.js
did you add it to config line?
my config in index.js
const config = {
databaseURI: databaseUri || ‘mongodb://localhost:27017/parsedb’,
cloud: process.env.CLOUD_CODE_MAIN || __dirname + ‘/cloud/main.js’,
appId: process.env.APP_ID || ‘app_id’,
appName: process.env.APP_NAME || ',
push: pushConfig,
//filesAdapter: filesAdapter,
fileUpload: {
enabledForAnonymousUser: true,
enabledForPublic: true,
enableForAuthenticatedUser: true,
},
i have also tried fileUpload.enableForPublic = true inside config line
i am still having “file upload by public is disabled”

I tried fileUpload: enableForPublic = true in config and tried
fileUpload.enableForPublic = true outside config : Both didn’t work. Been on this for over a week now.

I didn’t understand your last image. If you perform another query to parse server, maybe save a new object, does it work? Would you mind to share the code that you are using to start parse server? Do you see any error message on your logs?