[C4GT Community]: Implementation of Image Upload for Contents

[gouravmore]

Ticket Contents

Description

This ticket involves implementing image upload functionality for contents within our application for content create form. Enabling users to upload images will enhance the visual appeal and richness of our content, providing a more engaging experience for our users.

Goals

• [ ] Implement image upload functionality allowing users to upload images for contents.
• [ ] Ensure that uploaded images are properly validated and stored securely.
• [ ] Integrate image upload seamlessly into the content creation/updation form.

Expected Outcome

The final product should include a user-friendly interface for uploading images when creating or editing content. Users should be able to upload images from their local devices and see them displayed alongside the content.

Acceptance Criteria

• Users should be able to upload images in common formats (e.g., JPEG, PNG, GIF) from their local devices.
• Uploaded images should be properly validated for file type, size, and other relevant criteria.
• Uploaded images should be securely stored and associated with the respective content.
• The image upload feature should be integrated seamlessly into the content creation/editing interface.

Implementation Details

• The image upload functionality will be implemented using backend APIs for file handling and storage.
• Frontend components will be developed using HTML and JavaScript to facilitate user interaction and image selection/upload.
• Proper error handling and validation will be implemented to ensure the reliability and security of the image upload process.

Mockups/Wireframes

Product Name

ALL Configurable app

Organisation Name

Tekdi

Domain

No response

Tech Skills Needed

Angular

Mentor(s)

@gouravmore

Complexity

High

Category

Frontend

[c4gt-community-support[bot]]

Hi! Important Details - These following details are helpful for contributors to effectively identify and contribute to tickets.

• Sub-Category - Please mention the sub-category if any for the ticket

Please update the ticket

[prabal-rawal]

Hey @gouravmore Can I work on this issue?

Here's my workflow Step 1: Requirements Analysis Review the provided description and goals carefully. Understand the user requirements for image upload in the content creation form in detail. Determine if there are any specific constraints or guidelines to be followed.

Step 2: Technology Setup Ensure that the latest stable version of Angular and the required development tools are installed and set up correctly. Confirm access to the backend APIs for file handling and storage, and ensure that the necessary documentation or specifications are available. Set up the development environment, including any required dependencies or libraries.

Step 3: Design Frontend Components Design user interface components for image upload, keeping in mind the principles of good user experience (UX) and accessibility.

Step 4: Frontend Development Develop Angular components for image upload: Create a user-friendly interface for selecting and uploading images. Implement client-side validation for image upload. Handle progress indicators and feedback during file upload. Implement error handling and display meaningful error messages to users. Consider using Angular's built-in features or third-party libraries for file upload handling and image preview functionality.

Step 5: Backend Integration Integrate with the backend APIs for file handling and storage. Ensure proper communication between the frontend and backend, following best practices for secure file upload. Implement server-side validation for uploaded images, if required.

Step 6: Image Validation Implement comprehensive image validation on both client-side and server-side: Verify supported file types. Check file size against specified limits. Validate image dimensions, aspect ratio, or other relevant criteria based on requirements. Consider using server-side libraries or tools for advanced image validation if needed.

Step 7: Secure Storage Implement secure storage for uploaded images: Use appropriate encryption or secure protocols if required. Associate images with respective content or user data in the backend database or storage system. Implement access control mechanisms to ensure only authorized users can access or modify the uploaded images.

Step 8: Seamless Integration Integrate the image upload functionality seamlessly into the content creation/updation form. Ensure the UI/UX provides a smooth experience by considering the user flow, visual cues, and feedback.

Step 9: Testing Conduct thorough testing of the image upload functionality: Test on various devices and browsers, including testing for responsive design. Verify image validation and secure storage implementation. Test edge cases and error scenarios (e.g., network failures, server errors, etc.). Consider using automated testing frameworks like Jasmine or Karma for Angular components.

Step 10: Error Handling Implement proper error handling on both client-side and server-side: Provide clear and meaningful error messages to users.

Step 11: Documentation Document the implementation details, including: Explanations of any non-trivial code or workarounds. Update code comments for clarity and maintainability.

Step 12: Final Adjustments Make final adjustments based on the @gouravmore 's feedback and any additional requirements or changes. Ensure that all features are working as expected and that the code is production-ready.

[surajgorai2002]

Hi @gouravmore , I would like to work on this issue. I have worked on such issue before in some other projects. Also i have hands on experience in Angular. Please Assign this task to me .

[Sayanjones]

@gouravmore I'm interested on this project. Can we discuss further?

[rising0raj]

Hey @gouravmore I would like to work on this . I have gone through the code base can you assign this to me if it is open>> \

[prabal-rawal]

Also there is this issue while running the codebase Error: src/app/configurable-appliance/guards/auth.service.ts:38:9 - error TS2322: Type 'string' is not assignable to type 'number'.

38 return match.virtualID;

Which can be fixed by simply changing to return parseInt(match.virtualID, 10);

[surajgorai2002]

Also there is this issue while running the codebase Error: src/app/configurable-appliance/guards/auth.service.ts:38:9 - error TS2322: Type 'string' is not assignable to type 'number'.

38 return match.virtualID; ~~

Which can be fixed by simply changing to return parseInt(match.virtualID, 10);

I can help you with this issue if you want .

[Balajisaketh]

hi @gouravmore i have understood the problem statement.and i can contribute to #12 can you please assign this to me

[vivekkumarsoni123]

I am interested in this project. please assign me this issue.

[gouravmore]

I am interested in this project. please assign me this issue.

@vivekkumarsoni123 could you please share your approach/Steps for implementation to implementing this feature?

[gouravmore]

hi @gouravmore i have understood the problem statement.and i can contribute to #12 can you please assign this to me

could you please share your approach/Steps for implementation to implementing this feature?

[gouravmore]

Hey @gouravmore Can I work on this issue?

Here's my workflow Step 1: Requirements Analysis Review the provided description and goals carefully. Understand the user requirements for image upload in the content creation form in detail. Determine if there are any specific constraints or guidelines to be followed.

Step 2: Technology Setup Ensure that the latest stable version of Angular and the required development tools are installed and set up correctly. Confirm access to the backend APIs for file handling and storage, and ensure that the necessary documentation or specifications are available. Set up the development environment, including any required dependencies or libraries.

Step 3: Design Frontend Components Design user interface components for image upload, keeping in mind the principles of good user experience (UX) and accessibility.

Step 4: Frontend Development Develop Angular components for image upload: Create a user-friendly interface for selecting and uploading images. Implement client-side validation for image upload. Handle progress indicators and feedback during file upload. Implement error handling and display meaningful error messages to users. Consider using Angular's built-in features or third-party libraries for file upload handling and image preview functionality.

Step 5: Backend Integration Integrate with the backend APIs for file handling and storage. Ensure proper communication between the frontend and backend, following best practices for secure file upload. Implement server-side validation for uploaded images, if required.

Step 6: Image Validation Implement comprehensive image validation on both client-side and server-side: Verify supported file types. Check file size against specified limits. Validate image dimensions, aspect ratio, or other relevant criteria based on requirements. Consider using server-side libraries or tools for advanced image validation if needed.

Step 7: Secure Storage Implement secure storage for uploaded images: Use appropriate encryption or secure protocols if required. Associate images with respective content or user data in the backend database or storage system. Implement access control mechanisms to ensure only authorized users can access or modify the uploaded images.

Step 8: Seamless Integration Integrate the image upload functionality seamlessly into the content creation/updation form. Ensure the UI/UX provides a smooth experience by considering the user flow, visual cues, and feedback.

Step 9: Testing Conduct thorough testing of the image upload functionality: Test on various devices and browsers, including testing for responsive design. Verify image validation and secure storage implementation. Test edge cases and error scenarios (e.g., network failures, server errors, etc.). Consider using automated testing frameworks like Jasmine or Karma for Angular components.

Step 10: Error Handling Implement proper error handling on both client-side and server-side: Provide clear and meaningful error messages to users.

Step 11: Documentation Document the implementation details, including: Explanations of any non-trivial code or workarounds. Update code comments for clarity and maintainability.

Step 12: Final Adjustments Make final adjustments based on the @gouravmore 's feedback and any additional requirements or changes. Ensure that all features are working as expected and that the code is production-ready.

Can you please explain more on how you are going to implement the backend for this feature?

[hardik-pratap-singh]

Hello @gouravmore ! I want to work on this issue under Augtoberfest (C4GT) Can you please assign this issue ?

Approach : I will be using Cloudinary for uploading images efficiently. Also, it provides a unique string for the deployed image, which we can even store into the database if needed.

[Saurabhbalke]

hey @gouravmore , I've worked on a similar task during my internship using Azure BlobServiceClient. Here's an overview of what I did:

• File Input: I took the input with type="file" and checked its compatibility (jpeg/jpg/png).

• Preview & Upload:

  • Preview: I used DomSanitizer from @angular/platform-browser for image preview.
  • Upload: For uploading, I used BlobServiceClient and ContainerClient from @azure/storage-blob.

• Azure Containers: We created different containers for different types of content (like trailers, thumbnails, movies, profile images, etc.). After uploading the image to the appropriate container, we stored the image link in the database with a well-defined URL. For example: https://{accountName}.blob.core.windows.net/${container_name}/${associated_id}?${new Date};

I'm also open to learning new technologies if needed. Since I understand the basics of how things work, it would be easier for me to work with other storage services as well. P Please let me know if the above methods seem correct, and we can discuss it further.

[gouravmore]

@Saurabhbalke Thanks for the details! After uploading the images to Azure/aws - how will you integrate them into the content, especially alongside titles and audio?

[gouravmore]

Hi everyone,

Thank you all for your interest and contributions to this issue. We are currently planning to move the project to Next.js. Since the backend and frontend are currently separated, we are also consolidating them into a single repository to streamline development.

As a result, this specific issue will no longer be relevant in the new setup, and we are closing this ticket. We appreciate your efforts and encourage you to stay tuned for future opportunities to contribute as we move forward with the new structure.