JMediaPicker

JMediaPicker is a Vue 3 component that provides a complete media management solution for your applications. It allows users to browse, select, and upload media files to Amazon S3 storage.

Features

• Browse media files stored in S3
• Upload new media files with progress tracking
• Filter by file type (images, videos, all)
• Sort by newest or oldest
• Preview images and videos
• Drag-and-drop file upload
• Customizable configuration

Installation

npm install jmediapicker
# or
yarn add jmediapicker

Basic Usage

<template>
  <JMediaPicker
    :config="mediaPickerConfig"
    @select="onMediaSelect"
    @upload-complete="onUploadComplete"
    @error="onError"
  />
</template>

<script setup>
import { ref } from 'vue';
import JMediaPicker from 'jmediapicker';
import 'jmediapicker/dist/jmediapicker.css';

const mediaPickerConfig = ref({
  type: 'dialog',
  source: 's3',
  aws: {
    bucket: 'your-bucket-name',
    storage_path: 'media'
  },
  file_type: 'All',
  awsConfig: {
    region: 'your-region',
    credentials: {
      accessKeyId: 'YOUR_ACCESS_KEY',
      secretAccessKey: 'YOUR_SECRET_KEY'
    }
  }
});

const onMediaSelect = (media) => {
  console.log('Selected media:', media);
};

const onUploadComplete = (result) => {
  console.log('Upload complete:', result);
};

const onError = (error) => {
  console.error('Media picker error:', error);
};
</script>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | String | 'dialog' | Display mode ('dialog' or 'page') | | source | String | 's3' | Source of media (currently only 's3' is supported) | | aws.bucket | String | '' | S3 bucket name | | aws.storage_path | String | '' | Path prefix within the bucket | | file_type | String | 'All' | Default file type filter ('All', 'image', or 'video') | | awsConfig | Object | | AWS configuration object |

Events

| Event | Payload | Description | |-------|---------|-------------| | select | Media object | Fired when a media item is selected | | upload-complete | Result object | Fired when uploads are complete | | error | Error message | Fired when an error occurs |

Security Note

Never expose your AWS credentials in client-side code. In production, use server-side authentication or temporary credentials.

For More Documentation

For complete documentation and advanced usage examples, visit https://quanduck/projects/mediapicker