Upload .h5p content

[dildardk123]

Hi i am using your library to implement h5p content as per our need.
I have successfully installed your git code and modify it according to our need.
i am using mongo db to store h5p created data and aws bucket to store file.
i am using combine your h5p-examples packages with mongodb.
Now i want to upload h5p content using custom button in startPageRenderer.ts file of h5p-examples package.
Can you help me how can i do this?

Thanks

[sr258]

On the server-side you need a route that accepts a file upload from a HTML form (you need the Express file upload middleware). The route calls H5PEditor.uploadPackage and then immediately calls H5PEditor.saveOrUpdateContent. You can check out how we do this in the Lumi Desktop app here: https://github.com/lumieducation/lumi/blob/811e9b899eb9df5a31f8024ec392fdbbd96a3747/server/src/controllers/LumiController.ts?plain=1#L95

In startPageRenderer.ts you need to add a basic HTML form that allows the user to select a file and that calls the route from above when you click on a submit button. (see https://www.w3schools.com/howto/howto_html_file_upload_button.asp)

[sr258]

Does the media display in the player? Please start the server with the environment variables DEBUG=h5p* and LOG_LEVEL=debug and try the following:

• create new Fill in the Blanks & upload media
• save media
• download content
• upload content
• display content

Check the logs if you find anything suspicious (errors when uploading files or downloading).

[sr258]

You need to check what happens when you download a .h5p file with debug mode on as described above. I can't tell from here what's wrong. I can only assume that there's a problem when the .h5p exporter tries to download the media files from AWS.

[sr258]

I didn't run the code, but from looking at it, it looks like you don't create the temporary storage class correctly.

Steps:

• remove createH5PEditor.ts as you seem to always want to use Mongo / S3, so you don't need the configurability it offers
• create the H5PEditor object yourself using the constructor. pass in the content storage variable (from express.ts l. 80).
• create a S3TemporaryFileStorage object and also pass it into the editor constructor

[dildardk123]

Hello sir, I have checked that but i am not able to resolve media file issue.
Problem is that when i am downloading file and uplaoding that file, it is now showing media file at the time of upload.
I think problem is that when we downloading content that is not setting path of file.
Upload button working fine if i am using another site downloading h5p content. Problem with only this site downloading content.
Please check video:- Video
Check my files

Please check my issue, when you are free.
Thank you sir.

[sr258]

Open the .h5p file in Lumi (https://lumi.education) and check if the image is shown there. If it is, the problem must be in the upload and not in the download process. Please post the resulting .h5p file here if the image is missing in it in Lumi.

You've commented out h5pEditor.saveOrUpdateContent in express.ts:278. You need to do this, otherwise the content is not saved properly.

You're using a very old version of the library before it became a monorepo. You simply need to install and import the @lumieducation/h5p-server package from NPM (and other packages from @lumieducation/...) and you can remove most except for the code in example.

[dildardk123]

Thank you sir for your reply.
Sir there is no need to install latest library, we are working from it last 1 and half years.
It is working fine except image issue when we upload .h5p content.
I have checked many where downloaded .h5p content it is missing media file everywhere.
there is no issue with upload because i have checked different site .h5p file and it is showing image on upload.

My downloaded .h5p file is:- File

Different site .h5p content which is showing image on upload .h5p content:- File

Thank you.