Can not upload image forms-upload

[JimmyRowland]

I am trying to upload photos to cloudinary in apps

example-Instagram

example-membership

example-permissions

I tried type String and Array, but none of them works

imageUrl: {
   label: 'Image URL',
   type: String,
   canRead: ['guests'],
   canCreate: ['members'],
   canUpdate: ['members'],
   input: FormsUpload, // use the FormsUpload form component
   options: {
     preset: 'mypreset'
   },
 },

error message for type Array: Error: "imageUrl" is Array type but the schema does not include a "imageUrl.$" definition for the array items" Error for type String: Expected type String at value.imageUrl; String cannot represent a non string value: ["https://res.cloudinary.com/ufghkdsdg/image/upload/v346473/someImage.png"],

[SachaG]

See https://github.com/VulcanJS/Vulcan/issues/2208

[enzolutions]

I got a related issue, in reference that the preset is not found. check the following images about the error.

Here my schema after the suggested modification.

/*

A SimpleSchema-compatible JSON schema

*/

import FormsUpload from 'meteor/vulcan:forms-upload';
import { getSetting } from 'meteor/vulcan:core';

const schema = {

  // default properties

  _id: {
    type: String,
    optional: true,
    canRead: ['guests'],
  },
  createdAt: {
    type: Date,
    optional: true,
    canRead: ['guests'],
    onCreate: () => {
      return new Date();
    }
  },
  userId: {
    type: String,
    optional: true,
    canRead: ['guests'],
    resolveAs: {
      fieldName: 'user',
      type: 'User',
      resolver(pic, args, context) {
        return context.Users.findOne({ _id: pic.userId }, { fields: context.Users.getViewableFields(context.currentUser, context.Users) });
      },
      addOriginalField: true
    }
  },

  // custom properties

  imageUrl: {
    label: 'Image URL',
    type: String,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
    input: FormsUpload, // use the FormsUpload form component
    options: {
      preset: 'mypreset'
    },
  },
  fieldName: 'imageUrl.$',
      fieldSchema: {
    type: String
  },
  body: {
    label: 'Body',
    type: String,
    optional: true,
    input: 'textarea', // use a textarea form component
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members']
  },

  // GraphQL-only field

  commentsCount: {
    type: Number,
    optional: true,
    canRead: ['guests'],
    hidden: true,
    resolveAs: {
      fieldName: 'commentsCount',
      type: 'Float',
      resolver(pic, args, context) {
        return context.Comments.find({picId: pic._id}).count();
      }
    }
  }
};

export default schema;

Any suggestions are appreciated.

[JimmyRowland]

https://support.cloudinary.com/hc/en-us/articles/360004967272-Upload-Preset-Configuration Make sure you signed up for cloudinary and replace options: {

  preset: 'mypreset'
},

with your preset name

On Sun, Feb 17, 2019 at 11:34 PM enzo - Eduardo Garcia < notifications@github.com> wrote:

I got a related issue, in reference that the preset is not found. check the following images about the error.

[image: no-preset-console-error] https://user-images.githubusercontent.com/907914/52934803-a3ada080-33ab-11e9-97eb-a236e864c7ec.png [image: no-preset] https://user-images.githubusercontent.com/907914/52934804-a3ada080-33ab-11e9-9ef4-b0417c557892.png

Here my schema after the suggested modification.

/*

A SimpleSchema-compatible JSON schema

*/

import FormsUpload from 'meteor/vulcan:forms-upload'; import { getSetting } from 'meteor/vulcan:core';

const schema = {

// default properties

_id: { type: String, optional: true, canRead: ['guests'], }, createdAt: { type: Date, optional: true, canRead: ['guests'], onCreate: () => { return new Date(); } }, userId: { type: String, optional: true, canRead: ['guests'], resolveAs: { fieldName: 'user', type: 'User', resolver(pic, args, context) { return context.Users.findOne({ _id: pic.userId }, { fields: context.Users.getViewableFields(context.currentUser, context.Users) }); }, addOriginalField: true } },

// custom properties

imageUrl: { label: 'Image URL', type: String, canRead: ['guests'], canCreate: ['members'], canUpdate: ['members'], input: FormsUpload, // use the FormsUpload form component options: { preset: 'mypreset' }, }, fieldName: 'imageUrl.$', fieldSchema: { type: String }, body: { label: 'Body', type: String, optional: true, input: 'textarea', // use a textarea form component canRead: ['guests'], canCreate: ['members'], canUpdate: ['members'] },

// GraphQL-only field

commentsCount: { type: Number, optional: true, canRead: ['guests'], hidden: true, resolveAs: { fieldName: 'commentsCount', type: 'Float', resolver(pic, args, context) { return context.Comments.find({picId: pic._id}).count(); } } } };

export default schema;

Any suggestions are appreciated.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/VulcanJS/Vulcan-Starter/issues/116#issuecomment-464618037, or mute the thread https://github.com/notifications/unsubscribe-auth/AQNeBugCI0zhhT3M_DaC89yz8aixXaVJks5vOldygaJpZM4a_fy7 .

--

Best Yu Tian e:tian_yu@student.smc.edu

[enzolutions]

Hey @JimmyRowland

Thanks for your response. I created an account on cloudinary and create a preset. But looks like at some point I should provide my credentials.

Do you know where I should do that in the example-Instagram.

Thanks in advance.

[JimmyRowland]

You can just follow the video in the link above to create the preset and set the preset as follow. In this case, the preset name is [image: image.png].Then you can replace the presetname in the schema with your own preset name.

The upload to Cloudinary relies on unsigned upload:

Unsigned upload is an option for performing upload directly from a browser or mobile application with no authentication signature, and without going through your servers at all. However, for security reasons, not all upload parameters can be specified directly when performing unsigned upload calls.

Unsigned upload options are controlled by an upload preset http://cloudinary.com/documentation/upload_images#upload_presets, so in order to use this feature you first need to enable unsigned uploading for your Cloudinary account from the Upload Settings https://cloudinary.com/console/settings/upload page.

When creating your preset, you can define image transformations. I recommend to set something like 200px width & height, fill mode and auto quality. Once created, you will get a preset id.

It may look like this:

[image: Screenshot-Cloudinary]

Make sure that your preset is named the same between Cloudinary and the one you define in the schema. Otherwise, the upload will request will fail. http://docs.vulcanjs.org/forms-upload.html

On Mon, Feb 18, 2019, 12:44 AM enzo - Eduardo Garcia < notifications@github.com> wrote:

Hey @JimmyRowland https://github.com/JimmyRowland

Thanks for your response. I created an account on cloudinary and create a preset. But looks like at some point I should provide my credentials.

Do you know where I should do that in the example-Instagram.

Thanks in advance.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/VulcanJS/Vulcan-Starter/issues/116#issuecomment-464639065, or mute the thread https://github.com/notifications/unsubscribe-auth/AQNeBqOg4E7z_O-jNAvEwQYtA0-2fVgsks5vOmflgaJpZM4a_fy7 .

[enzolutions]

hey @JimmyRowland

This link was really useful http://docs.vulcanjs.org/forms-upload.html.

After following the video you posted before and that link, I applied the changes in schema to reflect my preset and all works like a charm

  imageUrl: {
    label: 'Image URL',
    type: String,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
    input: FormsUpload, // use the FormsUpload form component
    options: {
      preset: 'mypreset'
    },
  },

Thank you so much. Do you have any idea about how to do signed upload or maybe an integration with amazonn s3?

[JimmyRowland]

I am new to VulcanJS. You can request this feature from VulcanJS contributors.

On Mon, Feb 18, 2019, 1:20 AM enzo - Eduardo Garcia < notifications@github.com> wrote:

hey @JimmyRowland https://github.com/JimmyRowland

This link was really useful http://docs.vulcanjs.org/forms-upload.html.

After following the video you posted before and that link, I applied the changes in schema to reflect my preset and all works like a charm

imageUrl: { label: 'Image URL', type: String, canRead: ['guests'], canCreate: ['members'], canUpdate: ['members'], input: FormsUpload, // use the FormsUpload form component options: { preset: 'mypreset' }, },

Thank you so much. Do you have any idea about how to do signed upload or maybe an integration with amazonn s3?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/VulcanJS/Vulcan-Starter/issues/116#issuecomment-464651627, or mute the thread https://github.com/notifications/unsubscribe-auth/AQNeBgH4ihhc7JqRQF69A0AMxGqKMKz-ks5vOnBsgaJpZM4a_fy7 .

[Apollinaire]

@enzolutions https://github.com/OrigenStudio/vulcan-files-simple-example/tree/develop make sure to be on the develop branch it uses the following packages: https://github.com/OrigenStudio/vulcan-files/tree/develop https://github.com/OrigenStudio/vulcan-files-s3

[enzolutions]

Thank @Apollinaire,

I was checking the link, and I have doubts about how the scheme needs to looks like, could you share here a full schema with this change applied.

const schema = {
  // replace the entire `imageUrl` field
  ...generateFieldSchema({
    FSCollection: PicsFiles,
    fieldName: 'imageId',
    resolverName: 'image',
    fieldSchema: {
      label: 'Image',
      viewableBy: ['guests'],
      insertableBy: ['members'],
      editableBy: ['members'],
      form: {
        fileCheck: once(() => curryFileCheck({
          maxSize: 5 * 1024 * 1024, // 5Mbytes
          fileTypeRegExp:  /png|jpg|jpeg/i,
        })),
        FileRender: () => Image,
      },
    },
  }),
  // end of the replacement
};

Thanks in advance.