fix(browser): use data: protocol on preview provider file upload

[userquin]

Description

The problem using preview provider file upload should be fixed using data:${mime};base64,${base64} in the fetch url.

I guess the problem only on MacOS (kit), tested on my Windows laptop and working with or without the data: protocol.

Run this code on the browser console

const t = {
  basename: 'button.css', 
  base64: 'LndyYXBwZXIgewogIHBhZGRpbmc6IDEycHg7CiAgZm9udC1mYW1pbHk6IFJlYWRleCBQcm8sc2Fucy1zZXJpZjsKICBmb250LXNpemU6IGxhcmdlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLm5vZGUgewogIGJhY2tncm91bmQtY29sb3I6ICMzZjNmM2Y7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBoZWlnaHQ6IDMwcHg7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGNvbG9yOiB3aGl0ZTsKfQo=', 
  mime: 'text/css'
}

const fileInstance = await fetch(`data:${t.mime};base64,${t.base64}`)
  .then(r => r.blob())
  .then(blob => new File([blob], t.basename, { type: t.mime }))

console.log(fileInstance)

MacOS Chrome with data: protocol

MacOS Chrome Error without data: protocol

Looks like Vitest Browser mode is broken on my Windows laptop when running with the ui the test/browser folder, I need to enable CI to test this without the ui (set CI=true).

The problem seems to be when creating the Vite server, the second config load hangs.

@sheremet-va should we add a test for the preview provider? This is the test on my local (pnpm vitest -t XXXX):

test.runIf(server.provider === 'preview')('XXXX (preview provider)', async () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.multiple = true
  document.body.appendChild(input)
  await userEvent.upload(input, ['../src/button.css', '../package.json'])
  await expect.poll(() => input.files.length).toBe(2)

  const uploadedFile1 = input.files[0]
  expect(uploadedFile1.name).toBe('button.css')
  expect(uploadedFile1.type).toBe('text/css')

  const uploadedFile2 = input.files[1]
  expect(uploadedFile2.name).toBe('package.json')
  expect(uploadedFile2.type).toBe('application/json')
})

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.