Cant get a basic file upload to work (in React)


#1

Im trying to allow image uploads but I’m falling at the first hurdle!

Im currently using cfs:standard-packages and cfs:filesystem (although Ive tried cfs:gridfs too).

Im using React. In my React component I have an input type of file. When you upload an image and then submit the form the image appears to get logged out OK:

const imgFormSubmit = e => {
	e.preventDefault();
	const file = e.target.img.files[0];
	console.log(file);
}

Im defining a collection. This file isn’t auto loaded to the client or server.

./imports/api/images.js:

Images = new FS.Collection('images', {
  stores: [new FS.Store.FileSystem('images', { path: '~/uploads' })],
});
export default Images;

Im importing this into my server/main.js file, although I’m not sure if this is necessary or if the named export is being run?:

import Images from '../imports/api/images';

I also import it into my React component and then attempt to use it in the form:

import Images from '../../../api/images';

  const imgFormSubmit = e => {
    e.preventDefault();
    const file = e.target.img.files[0];

    Images.insert(file, function(err, fileObj) {
      if (err) {
        console.log(err);
      } else {
        console.log('it worked');
      }
    });
  };

When I submit the form the browser console tells me “it worked” but I also get an error:

The provided value 'undefined' is not a valid enum value of type XMLHttpRequestResponseType.

It seems this is a common error but unlike others in that thread the image isnt uploaded to my filesystem.

Also, I’m not sure if this is whats supposed to happen but in my database I have new tables of cfs._tempstore.chunks and cfs.images.filerecord, but no images table like I suspected.


#2

I wouldn’t use CFS anymore. It’s more or less abandoned. Instead, I recommend to use slingshot in combination with a cloud storage. I am using S3 as my image store and this combination just works. Another advantage is that your server won’t have to serve these static files anymore which reduces server load.

https://atmospherejs.com/edgee/slingshot


#3

Ill take a look at that. I was just looking for a quick solution though, so I could get a working demo on my local computer. Its frustrating after getting up and running so quickly with Meteor that file uploads arn’t simpler.


#4

This is a good short term solution for me:

UPDATE - Meh, it wasn’t so good. I wish Slingshot had a local sandbox mode so you didn’t have to worry about it while just prototyping locally.